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:

,js,output

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./vidumiroki/edit?html,js,output

• javascript
• reactjs

• In what way is it not working? Please include the details in your question. – David L Commented Sep 13, 2016 at 15:11

1 Answer 1

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'));