React.js按钮未从另一个文件调用函数

Question

I am trying to call the function deleteToDo from toDo.js but when I click the button it doesn't console.log anything. It doesn't give me any errors either. Any help would be appreciated it's probably a pretty easy question but i'm very new to react.

app.js:

import React, { Component } from 'react';
import './App.css';
import ToDo from "./components/ToDo.js"

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todos: [
        {description: 'Walk the cat', isCompleted: false},
        {description: 'Throw the dishes away', isCompleted: false},
        {description: 'Buy new dishes', isCompleted: false}
      ],
       newTodoDescription: ''
    };
  }

  deleteToDo(){
    console.log("test");
  }

  render() {
    return (
      <div className="App">
       <ul>
        <ToDo/>
       </ul>
      </div>
    );
  }
}

export default App;

todo.js :

import React, { Component } from "react";

class ToDo extends Component{
  render(){
    return(
      <li>
        <button onClick={this.props.deleteToDo}>Delete</button>
      </li>
    );
  }
}

export default ToDo;

Answer 1

Extend your app.js. You should pass the reference of your function via props.

<ToDo deletetodo={this.deleteTodo} />

Hope this helps!

Answer 2

It is because you are not passing the deleteToDo function to the ToDo component.

// app.js
  deleteToDo = ()=>{
    console.log("test");
  }

  render() {
    return (
      <div className="App">
       <ul>
        <ToDo deleteToDo={this.deleteToDo}/>
       </ul>
      </div>
    );
  }