onClickと関数の仕様がよくわからない

Question

現在、以下のサイトを参考にReactのAjax処理について勉強しています。
React-Ajax

しかしながら分からない点があったので質問させていただきます。この質問はReactに依存した問題ではないかもしれません。（私がJavaScriptも初心者なため定かではありません)

下記コードの、jsx部分、即ちrender()関数部分での　updateTodo()、deleteTodo()の2つの関数呼び出しとaddTodo()の関数呼び出しのフォーマットが違うのは何故なのでしょうか？

前者は
onClick={() => this.updateTodo(todo)}
後者は
onClick={this.addTodo}

前者をアロー関数にする意味がよくわかりません。　初心者の私からすると前者も
onClick={this.updateTodo(todo)}
で良いような気がしていまします。　
何故これだとうまくいかないのでしょうか？

import React, { Component } from 'react';
 
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todo: []
    };

    this.addTodo = this.addTodo.bind(this);
  }
  
  // 初期値の設定
  componentWillMount(){
    this.fetchResponse();
  }
  
  // リストの更新
  fetchResponse(){
    fetch('http://localhost:3001/todos')
    .then( res => res.json() )
    .then( res => {
      this.setState({
        todo : res
      });
    })
  }
  
  // 新規追加
  addTodo() {
    fetch('http://localhost:3001/todos', {
      method: 'POST',
      body: JSON.stringify({
        title: this.refs.newText.value
      }),
      headers: new Headers({ 'Content-type' : 'application/json' })
    }).then( () => {
      // リストの更新
      this.fetchResponse();
      // 値の初期化
      this.refs.newText.value = "";
    })
  }
  
  // 編集機能
  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' })
    })
  }
  
  // 削除機能
  deleteTodo(todo) {
    fetch(`http://localhost:3001/todos/${todo.id}`, {
      method: 'DELETE'
    }).then( () => {
      const todos = this.state.todo.filter(item => item.id !== todo.id)
      // 保存
      this.setState({
        todo : todos
      });
    })
  }
   
  render() {
    return (
      <div>
        <h1>TODOアプリ</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="編集" onClick={() => this.updateTodo(todo)}/>
              <input type="button" value="削除" onClick={() => this.deleteTodo(todo)}/>
            </li>
          ))}
        </ul>
        <input type="text" ref="newText"/>
        <input type="button" value="追加" onClick={this.addTodo}/>
      </div>
    );
  }
}
  
export default App;  

Answer 1

引数 todo を渡すためでは。

onClick={() => this.updateTodo(todo)} // onClickに関数を渡している（引数に「todo」を渡している）
onClick={this.updateTodo(todo)} //onClickに関数の実行結果を渡している
onClick={this.addTodo}  // onClickに関数を渡している（引数を特に指定していないので関数をそのままonClickに渡している）

Comments

[van-0215]

ありがとうございます！　理解しました。