React.js Value not updated on button

Question

Console.log printing the incremented value, but value not updated in button

'use strict';

const e = React.createElement;

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: 0 };
  }

  render() {
    return e(
      'button',
      {
        onClick: () => {
          this.state.val = this.state.val + 1
          console.log(this.state.val)
        }
      },
      'Like' + this.state.val // here Like 1 should be displayed
    );
  }
}

const domContainer = document.querySelector('#root');
ReactDOM.render(e(Counter), domContainer);

rockingskier · Accepted Answer · 2018-09-11 07:14:40Z

3

You should never update state directly. Always use setState

this.state.val = this.state.val + 1;  // bad
this.setState((state) => ({           // good
    val: state.val + 1
}))

Otherwise React will not "see" the update and will not re-render.

answered Sep 11, 2018 at 7:14

rockingskier

9,3763 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rashidnk Over a year ago

I was thinking in angular way :)

Amruth · Accepted Answer · 2018-09-11 07:13:58Z

1

You have to use setState to update the state. and state update is asynchronous call so you have to use call back functions to check weather store is updated or not.

class Counter extends React.Component {
constructor(props) {
    super(props);
    this.state = { val: 0 };
    this.updateState = this.updateState.bind(this);
}

updateState(){
        this.setState({val : this.state.val + 1 }, function(){
            console.log(this.state.val)
        })
}

render() {
    return e(
    'button',
    {
        onClick: () => {this.updateState()
        }
    },
    'Like' + this.state.val
    );
}
}

answered Sep 11, 2018 at 7:13

Amruth

5,9122 gold badges30 silver badges41 bronze badges

Comments

Mir · Accepted Answer · 2018-09-11 07:15:52Z

1

You have to update React state via this.setState() function. Otherwise, the component does not re-render. That's basic of React. You should read more React documents or do some tutorials.

You can read more here!

answered Sep 11, 2018 at 7:15

Mir

1141 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

React.js Value not updated on button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related