react state change code example
Example 1: state with react functions
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Example 2: update state in react
You have to use setState() for updating state in React
{
hasBeenClicked: false,
currentTheme: 'blue',
}
setState({
hasBeenClicked: true
});
Example 3: change state in react
import React, {Component} from 'react';
class ButtonCounter extends Component {
constructor() {
super()
// initial state has count set at 0
this.state = {
count: 0
}
}
handleClick = () => {
// when handleClick is called, newCount is set to whatever this.state.count is plus 1 PRIOR to calling this.setState
let newCount = this.state.count + 1
this.setState({
count: newCount
})
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.handleClick}>Click Me</button>
</div>
)
}
}
export default ButtonCounter
Example 4: react change state
// React change state
this.setState({state to change:value});
Example 5: how to update state in react
// Correct
this.setState(function(state, props) {
return {
counter: state.counter + props.increment
};
});
Example 6: reading state react
const Example = (props) => {
// You can use Hooks here!
return <div />;
}