React - State 在一个父 function 中定义，但不在另一个父 function 中被子调用

Question

I'm re-learning React, and trying to build a simple TODO app, that you can add and remove items from.

My problem is when calling handleRemove() . Both functions are in my parent component, and I'm able to pass down handleRemove() to my child component. But when I try to setState in handleRemove, it comes up as undefined. I'm not sure why, seeing that it is almost the same as handleAdd()

This is my Todo:

import React from 'react';
import List from './List';

export default class Todo extends React.Component{

        state= {
            listItems: [],
            count: 0
        }    

    
    handleAdd = (itemToAdd) =>{
        document.querySelector("#input").textContent="";


        this.setState(prevState => ({
            listItems: [...prevState.listItems, itemToAdd],
            count: prevState.count+1
        }))
    }


    handleRemove = (itemToRemove) =>{
        

        let newListItems = this.state.listItems;
        let indexOfRemove = newListItems.indexOf(itemToRemove);
        newListItems.splice(indexOfRemove, 1);


        console.log(newListItems);

        //Setting listItems to the newly created newListItems
        this.setState(prevState => ({
            listItems: newListItems,
            count: prevState.count-1
        }))
    }

    render(){
        return(
            <div>
                <p>Number of items: {this.state.count}</p>
                <input type="text" id="input"/>
                <button onClick={() => this.handleAdd(document.querySelector("#input").value)}>Add</button> 
                <List removeHandle={this.handleRemove} items={this.state.listItems}/>
            </div>
        )
    }
}

This is my List:

import React from 'react';

function List(props){
        console.log(props); // props all show up as they're supposed to here
        
        return(
            <ol>
                {
                    props.items.map((item, index) => {
                        return(
                            <div key={index}>
                                <li key={index}>{item}</li>
                                <button onClick={() => props.removeHandle(item)}>Remove from list</button>
                            </div>
                            
                        );
                    })
                }
            </ol>
        )
    }
export default List;

I feel like this is something obvious, but I've looked and can't find any clear answer

Answer 1

Alright, just found the solution 5 minutes after posting this, classic .

I'll keep this up for any beginners who are confused when trying to keep all state logic in the correct place.

The problem is that when passing down the handleRemove() to my List , I needed to add. bind(this) , like such:

<List removeHandle={this.handleRemove.bind(this)} items={this.state.listItems}/>

Not exactly sure why it's needed, but i'll be looking into it.

If somebody knows why .bind() is needed, feel free to leave a comment

Update: See above comment