I want to pass a handleDelete function as a prop. In the child ponent I want to delete the specific Todo from the list by clicking on the button there.

constructor(){
    super();
    this.state = {
        key:0,
        temp:'',
        list:[]
    }
}

handleList = () => {

    let { key,temp } = this.state;
    if (temp.length > 0 ) {
        let list = [...this.state.list];
        list.push(<Todo 
            delete = {()=>{this.handleDelete(key)}}
            text = {temp} 
            key = {key}/>);
        this.setState({
            list:list,
            key: this.state.key+1
        });
    }
}

handleDelete = (index) =>{
    let list = [...this.state.list];
    list.splice(index,1);
    this.setState({list});
    console.log('list',list.length);

}


render() {

    return(
        <div className = 'global'>

           <button onClick={() => {this.handleList()}
            }>Add-New</button>
           <button onClick={() => {this.handleDelete(key)}
            }>delete</button>
            <input 
                onChange = {
                    (e)=>{this.setState({
                        temp: e.target.value
                    })}
                }
                type = 'text' 
                placeholder = 'Enter New Todo!'/>
            <hr/>
     </div>

Todo ponent

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {()=>
                props.delete
            }>Del</button>
            <hr/>
        </li>
    );
}

I want to pass a handleDelete function as a prop. In the child ponent I want to delete the specific Todo from the list by clicking on the button there.

constructor(){
    super();
    this.state = {
        key:0,
        temp:'',
        list:[]
    }
}

handleList = () => {

    let { key,temp } = this.state;
    if (temp.length > 0 ) {
        let list = [...this.state.list];
        list.push(<Todo 
            delete = {()=>{this.handleDelete(key)}}
            text = {temp} 
            key = {key}/>);
        this.setState({
            list:list,
            key: this.state.key+1
        });
    }
}

handleDelete = (index) =>{
    let list = [...this.state.list];
    list.splice(index,1);
    this.setState({list});
    console.log('list',list.length);

}


render() {

    return(
        <div className = 'global'>

           <button onClick={() => {this.handleList()}
            }>Add-New</button>
           <button onClick={() => {this.handleDelete(key)}
            }>delete</button>
            <input 
                onChange = {
                    (e)=>{this.setState({
                        temp: e.target.value
                    })}
                }
                type = 'text' 
                placeholder = 'Enter New Todo!'/>
            <hr/>
     </div>

Todo ponent

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {()=>
                props.delete
            }>Del</button>
            <hr/>
        </li>
    );
}

• javascript
• reactjs

2 Answers 2

Assuming your handleDelete function does what it says: what you're doing looks like it should work, except that you're not actually calling the function in <Todo>.

Your original handler in <Todo> invokes an arrow function that returns the passed in function, but fails to invoke the passed in function itself.

Change your ponent to invoke the function that's passed in the props:

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {() => props.delete()}>Del</button>
            <hr/>
        </li>
    );
}

Per the ments on my original answer, this could be further simplified:

const Todo = (props) =>{
    return(
        <li>
            <h3>{props.text}</h3>
            <button onClick = {props.delete}>Del</button>
            <hr/>
        </li>
    );
}

If you want to pass handleDelete() as a property, you can do it like this.

add Todo inside the return of your main ponent (ponent with states). So under the div className = 'global', you can put:

<Todo handleDelte={this.handleDelete} />

then on your Todo ponent, to use it:

const Todo = ({handleDelete}) => {content}

Also, be sure that Todo ponent is imported in your main ponent (ponent with states)