reactでstateの配列に値を追加して画面に表示したい

Question

前提・実現したいこと

まずはソースコードは以下の通りです。

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ["1", "2", "3", "4", "5", "6", "7", "8", "9"],
      word: [],
    }
  }; 
  render() {
    return (
      <div>
        {this.state.text.map(number => (<Button value={number} onClick={() => this.handleClick(number)} />))}
        <Word word={this.state.word}/>
      </div>
    );
  }
  handleClick(number) {
    console.log(number);
  }
}

class Button extends React.Component {
  render() {
    return (<button onClick={this.props.onClick}>{this.props.value}</button>)
  }
}

class Word extends React.Component {
  render() {
    return (<div>{this.props.word}</div>);
  }
}

React.render(<Main />, document.getElementById('app'));

handleClick関数内のconsole.log(number)では
クリックしたボタンの値が取れています。
ボタンをクリックするたびに
この値をthis.state.wordにpushして画面に表示させたいです。

やり方は色々あるみたい？ですが、スマートな書き方を教えてください

Answer 1

stateを更新すると再描画されるので、それで表示内容を更新するのがよくあるパターンです。
いまのstateに破壊的な操作を加えないようにするのが良いです（this.state.word.pushとかはだめ）。

handleClick(number) {
  this.setState({
    word: this.state.word.concat(number)
  })
}

Comments

[mrr]

this.state.word.pushとかは駄目なんですね！ありがとうございます。勉強になります！

Answer 2

現在のstateをobjectコピーしてpushした後再setStateでよいかと（そのままpushがダメなのは参照型なので…）

handleClick(number) {
 const word = Object.assign([], this.state.word);
 word.push(number);
 this.setState({ word });
}