React updateState function

Question

I have simple update data function which currently not working:

    class App extends React.Component {

           constructor(props) {
              super(props);

              this.state = {
                 data: 'Initial data...'
              }

              this.updateState = this.updateState.bind(this);

           };

           updateState() {
              this.setState({data: 'Data updated...'})
           }

           render() {
              return (
                 <div>
                    <button onClick = {this.updateState}>CLICK</button>
                    <h4>{this.data}</h4>
                 </div>
              );
           }
        }

   ReactDOM.render(<App/>, document.getElementById('app'));

Below I have link to jsbin:

http://jsbin.com/vidumiroki/edit?html,js,output

In what way is it not working? Please include the details in your question. — David L

Michal Kucaj Michal Kucaj · Accepted Answer · 2016-09-13T13:21:12

You missed state in you return render function

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));

React updateState function

1 Answers