class ListOfWords extends React.PureComponent {
   render() {
      return <div>{this.props.words.join(',')}</div>;
   }}class WordAdder extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         words: ['marklar']
      };
      this.handleClick = this.handleClick.bind(this);
   }   // BUG! This won’t update ListOfWords as 'words' still points to the same object   //handleClick() {   //
  const words = this.state.words;   //
  words.push('marklar');   //
  this.setState({words: words});   //}
   handleClick() {
     this.setState(state=>({words:[...state.words, 'extravagant' ]}));
   }
   render() {
      return (<div><button onClick={this.handleClick} >Add</button>
                          <ListOfWords words={this.state.words} /></div>);
   }}ReactDOM.render(<WordAdder/>,document.querySelector("div"));