Home>

Currently I am studying Ajax processing of React with reference to the following site.
React-Ajax

However, I have a question that I didn't understand. This question may not be a React dependent issue. (I'm not sure because I'm a beginner in JavaScript)

Why is the format of the two function calls of updateTodo () and deleteTodo () and the function call of addTodo () different in the jsx part of the following code, ie, the render () function part?

The former is
onClick = {() =>this.updateTodo (todo)}
The latter is
onClick = {this.addTodo}

I don't understand the meaning of making the former an arrow function. From the beginner's standpoint, the former is also
onClick = {this.updateTodo (todo)}
I feel good.
Why doesn't this work?

import React, {Component} from 'react';
class App extends Component {
  constructor (props) {
    super (props);
    this.state = {
      todo: []
    };
    this.addTodo = this.addTodo.bind (this);
  }
  // Initial value setting
  componentWillMount () {
    this.fetchResponse ();
  }
  // update the list
  fetchResponse () {
    fetch ('http: // localhost: 3001/todos')
    .then (res =>res.json ())
    .then (res =>{
      this.setState ({
        todo: res
      });
    })
  }
  // add new
  addTodo () {
    fetch ('http: // localhost: 3001/todos', {
      method: 'POST',
      body: JSON.stringify ({
        title: this.refs.newText.value
      }),
      headers: new Headers ({'Content-type': 'application/json'})
    }). then (() =>{
      // update the list
      this.fetchResponse ();
      // value initialization
      this.refs.newText.value = "";
    })
  }
  // edit function
  updateTodo (todo) {
    fetch (`http: // localhost: 3001/todos/${todo.id}`, {
      method: 'PUT',
      body: JSON.stringify ({
        id: todo.id,
        title: todo.title
      }),
      headers: new Headers ({'Content-type': 'application/json'})
    })
  }
  // delete function
  deleteTodo (todo) {
    fetch (`http: // localhost: 3001/todos/${todo.id}`, {
      method: 'DELETE'
    }). then (() =>{
      const todos = this.state.todo.filter (item =>item.id! == todo.id)
      // save
      this.setState ({
        todo: todos
      });
    })
  }
  render () {
    return (
      <div>
        <h1>TODO app</h1>
        <ul>
          {this.state.todo.map (todo =>(
            <li key = {todo.id}>
              <input type = "text"
                defaultValue = {todo.title}
                onChange = {e =>todo.title = e.target.value}
              />
              <input type = "button" value = "edit" onClick = {() =>this.updateTodo (todo)} />
              <input type = "button" value = "delete" onClick = {() =>this.deleteTodo (todo)} />
            </li>
          ))}
        </ul>
        <input type = "text" ref = "newText" />
        <input type = "button" value = "add" onClick = {this.addTodo} />
      </div>
    );
  }
}
export default App;
  • Answer # 1

    To pass the argumenttodo.

    onClick = {() =>this.updateTodo (todo)} // A function is passed to onClick ("todo" is passed as an argument)
    onClick = {this.updateTodo (todo)} // The function execution result is passed to onClick
    onClick = {this.addTodo} // The function is passed to onClick (the function is passed to onClick as it is because no argument is specified)