העברה של props כמשתנה או העברה של פונקציה כ props

הקומפונט הראשי (האבא) מעביר את ה props

הפונקציה:
handleDelete = () => {
console.log('clicked');
}

העברה : שימוש בשם הפעולה
onDelete={this.handleDelete}

class Countrs extends Component {
    state = {
        counters: [
            {id:1 , value: 2},
            {id:2 , value: 3},
            {id:3 , value: 0},
            {id:4 , value: 0}
        ]
    }

    handleDelete = () => {
     console.log('clicked');   
    }

    render() { 
        return ( 
            

            <div>
                {this.state.counters.map(counter => 
                <Counter key={counter.id} onDelete={this.handleDelete} value={counter.value} />
                )}
            </div>


 
        );
    }
}
export default Countrs;

קומפונט בן שמקבל את הפונקציה לפי השם שהעברנו onClick={this.props.onDelete}

class Counter extends Component {
    state = {
        value: this.props.value
    };

    handle = product => {
        this.setState({value: this.state.value + 1})
    }

    render() { 
        return (
            <div>
                <div>{this.state.value}</div>
                <button 
                    onClick={() => this.handle({id:1})}
                    style={{fontSize: 10}} 
                    className="badge badge-secondary  btm-sm"
                >Increment 
                </button>
                <button onClick={this.props.onDelete} className="btn btn-danger btn-sm m2">Delete</button>


            </div>
        );
    }

}
 
export default Counter;