handleDelete in React JS(Passing child's props as an argument to handleDelete function)

JavaScript
1

Hello kind fellow campers!

I have a little understanding question and I will very thankful if you could help to clarify it.

I am building a little “todo list” app to practice React. I could just figure out that in order to delete the item from an array in the state of my main parent “App component” I have to pass the child component’s id, as the argument in another props of the delete handleDelete function like that

 onClick={() => this.props.handleDelete(this.props.todo.id)}

← this is the code that I have my child’s component.

The question is why do I need to writethis onClick event as the empty array function? why can’t I simply write

onClick={this.props.handleDelete(this.props.todo.id)}

?

P.S. I hope I coud explain the question correctly.

Thank you in advance!
Best!

2

I’m not sure what you mean by “empty array function” – the first example is just a function. Second one is a function call, it’s just some value, it’s not a function definition.

Event handlers in JavaScript take the former (a function) as an argument – they need a function that they can run when the event happens.

The second one is whatever the return value of that function is, and as that’s undefined, what’s there is literally the same as writing:

onClick={undefined}

As example:

This is a function:

function add(a,b) {
  return a + b;
}

This is not a function, it’s the number 3:

add(1,2)
3

I kind of got it. However, it is still not what i meant. Maybe it would be more clear if I share the whole code.
Here is the parent and child components where I pass the function handleDelete as a props to child.

//Parent component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      todos: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
  };
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  };
  handleSubmit(event) {
    if (this.state.inputValue) {
      this.setState({
        inputValue: '',
        todos: this.state.todos.concat({ text: this.state.inputValue, completed: false, id: this.state.inputValue.length + this.state.inputValue[0] })
      })
    }
    event.preventDefault()
  };
  handleDelete(itemId) {
    this.setState({
      todos: this.state.todos.filter(el => {
        return el.id !== itemId
      })
    })
  };
  render() {
    return (
      <div className="App">
        <header>
          <h1>Basan's To Do List</h1>
        </header>
        <Form input={this.state.inputValue} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
        <TodoList todos={this.state.todos.map(el => {
          return (<Todo key={el.id} todo={el} text={el.text} handleDelete={this.handleDelete} />)
        }
        )} />
      </div>
    );
  }
}

//Child component
class Todo extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className="todo"  >
                <li className="todo-item" todo={this.props.todo} >
                    {this.props.text}
                    <button className="btn-check">
                        <i className="fas fa-check"></i>
                    </button>
                    <button className="btn-trash" onClick={() => this.props.handleDelete(this.props.todo.id)} >
                        <i className="fas fa-trash"></i>
                    </button>
                </li>
            </div>
        )
    }
};
4

Right, so when a click event happens you want a function to run that handles the delete. So

() => handleDelete(id)

That’s a function that when it runs, handles delete.

This

handleDelete(id)

Is just whatever the value of that is, I assume undefined. Every time onClick happens, it runs…undefined. Which is not a function, doesn’t do anything useful.

running the function will do something useful, but there it will just be resolved to a value when the code is evaluated (it may actually delete one, but accidentally, not because of a button click)

1 Like
5

Might be worth a read.

1 Like
6

Thank you very much!!!

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.