react.jsのtodoアプリ作成中に生じた疑問

Question

前提・実現したいこと

reactをtodoアプリを作りながら学んでいたのですが、以下のコードを実行してaddボタンを押すとaddメソッドが呼ばれるようになっていると思ったのですが、ボタンを押しても何も起きなかったので、console.logを入れてみたところ表示されませんでした。addが呼ばれていないのでしょうか？なにが原因なのでしょうか？

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom';

class TodoApp extends React.Component {
  constructor() {
    super()
    this.state={
      todoList: [],
      value: "",
    }
  }

  onChange(e) {
    this.setState({value: e.target.value})
  }

  add() {
    console.log("test");
    this.setState({
      todoList: this.state.todoList.concat(this.state.value),
      value: "",
    })
  }

  render() {
    const todoListNode = this.state.todoList.map((todo, idx) => {
      return <li key={idx}>{todo}</li>
    })

    return (
      <div>
        <h1>TODO App</h1>
        <div>
          <input
            type="text"
            value={this.state.value}
            onChange={e => this.onChange(e)}
          />
        </div>
        <button onClick={() => this.add}>add</button>
        <ul>
          {todoListNode}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('root')
);

Answer 1

onClick に渡している関数本体で、this.add の後ろに () が必要です。ですので、以下のように修正してみるといかがでしょうか？

- <button onClick={() => this.add}>add</button>
+ <button onClick={() => this.add()}>add</button>

Comments

[masa112m]

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

[jun68ykt]

どういたしまして????
> 解決しました。
とのことでよかったです。