Incrementing a State by One Using React

Question

In the reactor, I try to make an increment button of a value stored in a state. However, using the code below, my value is set to undefined or NaN when using handleClick.

class QuestionList extends React.Component { constructor(props) { super(props); this.state = {value: 0}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick = (prevState) => { this.setState({value: prevState.value + 1}); console.log(this.state.value) } 

Can you tell me why this is happening? it should be correct according to the docs here: https://facebook.imtqy.com/react/docs/state-and-lifecycle.html

Answer 1

Because you are using the handleClick function incorrectly. Here:

 handleClick = (prevState) => { .... } 

prevState will be the event object passed to handleClick function, you need to use prevState with setState, for example:

 handleClick = () => { this.setState(prevState => { return {count: prevState.count + 1} }) } 

Another problem: setState isync, so console.log(this.state.value) will not print the updated status value, you need to use the callback function using setState.

Learn more about the asynchronous behavior of setState and how to check for an updated value.

Check the working solution:

 class App extends React.Component { constructor(props){ super(props); this.state={ count: 1} } onclick(type){ this.setState(prevState => { return {count: type == 'add' ? prevState.count + 1: prevState.count - 1} }); } render() { return ( <div> Count: {this.state.count} <br/> <div style={{marginTop: '100px'}}/> <input type='button' onClick={this.onclick.bind(this, 'add')} value='Inc'/> <input type='button' onClick={this.onclick.bind(this, 'sub')} value='Dec'/> </div> ) } } ReactDOM.render( <App />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='container'></div> 

Answer 2

set the isync state so you don't see the value update when console.log appears. You must have a status value printed in the user interface so that you can see what is happening. To fix the console log, try this.

 class QuestionList extends React.Component { constructor(props) { super(props); this.state = {value: 0}; } handleClick = (prevState) => { this.setState({value: prevState.value + 1}, () => { console.log(this.state.value) }); } 

NOTE. When you define the built-in lambda (arrow function) for the this reacting class, it is bound correctly, so you do not need to bind it in the constructor.

you can also change the way the previous number is transmitted if its just incrementing a state like this

 handleClick = () => { this.setState({value: this.state.value + 1}, () => { console.log(this.state.value) }); } 

Answer 3

 class SkuVariantList extends React.Component { constructor(props) { super(props) this.state = { clicks: 0 }; this.clickHandler = this.clickHandler.bind(this) } componentDidMount() { this.refs.myComponentDiv.addEventListener('click', this.clickHandler); } componentWillUnmount() { //this.refs.myComponentDiv.removeEventListener('click', this.clickHandler); } clickHandler() { var clk = this.state.clicks this.setState({ clicks: clk + 1 }); } render() { let children = this.props.children; return ( <div className="my-component" ref="myComponentDiv"> <h2>My Component ({this.state.clicks} clicks})</h2> <h3>{this.props.headerText}</h3> {children} </div> ); } } 

Answer 4

Hello, try these codes to increase your value.

 class Counter extends React.Component{ constructor(props){ super(props); this.addOne = this.addOne.bind(this); this.state = { count : 0 } } addOne() { // addOne as HandleClick this.setState((preState) => { return { count : preState.count + 1 }; }); } render() { return ( <div> <h1>Count : {this.state.count}</h1> <button onClick={this.addOne}>+1</button> </div> ); } } ReactDOM.render(<Counter />, document.getElementById('YOUR-ID')); 

Answer 5

try it

 class QuestionList extends React.component { constructor(props){ super(props) this.state = { value : 0 } } handleClick(){ this.setState({ value : this.state.value + 1 }) } render(){ return( <button type="button" onClick={this.handleClick.bind(this)}> {this.state.value} </button> ) } } 

Note that when you set the state, it calls the rendering function, which will display the current state. Try it in the browser!

Answer 6

 import React from 'react' class App extends React.Component{ constructor(){ super() this.state = { count: 0 } this.handleClick = this.handleClick.bind(this) } handleClick(){ this.setState(prevState => { return { count: prevState.count + 1 } }) } render(){ return( <div style = {{display: 'flex', fontSize: 30, flexDirection: 'column', alignItems:'center'}}> <h1>{this.state.count}</h1> <button onClick = {this.handleClick}>Change</button> </div> ) } } export default App