0
2
dilip
answered Jun 10 '21 00:00
state is the plain JavaScript object which is used in the React Component , which contain information related the Component state. state control the behavior of the component
setState() function used to change the state information.
as you can see the following component have state type which display in the component html render.
if we change the state type information than it reflect in the html change
class Type extends React.Component {
constructor() {
super();
this.state = {type: 'timer'}
}
render() {
return (
<div>
{this.state.type}
</div>
);
}
}
initial state.type is is timer so it will display timer there in render element.
if we add setState , lets see how setState work by example in react
class Type extends React.Component {
constructor() {
super();
this.state = {type: 'timer'}
this.changeState = this.changeState.bind(this);
}
changeState(){
this.setState({type:'stopwatch'})
}
render() {
return (
<div>
{this.state.type} <button onClick={this.changeState} >Click to change Type</button>
</div>
);
}
}
here on click event we calling changeState function will invoke setState function to change the state.type to stopwatch and it reflect it in the html.
we need to bind the function in constructor like this :
this.changeState = this.changeState.bind(this);
and in the changeState function call setState :
this.setState({type:'stopwatch'})
1
angeo
answered Jun 10 '21 00:00
can we call setState() in the constructor() to update the state in React ?
no you cant call setState() in the constructor() in React
for example :
constructor() {
super();
this.state = {type: 'class'}
this.setState({type:'function'})
}
suppose you want to change the state after the declaration of the state by setState in constructor , setState () wont change the state in this version of code , state.type still class in above example.
you cant call setState() in the constructor() in React ,instead initial state to this.state directly
1
jagdish
answered Jun 10 '21 00:00
is we can change state in react without setState() function ? , lets find out the answer. i am taking as example Type Component as above :
can we change the state by directly assigning the value.like
this.state.type='stopwatch';
class Type extends React.Component {
constructor() {
super();
this.state = {type: 'timer'}
this.changeState = this.changeState.bind(this);
}
changeState(){
this.state.type='stopwatch';
}
render() {
return (
<div>
{this.state.type} <button onClick={this.changeState} >Click to change Type</button>
</div>
);
}
}
as you can see when i click on the change type which never change the state type so its not possible to change the state without setState() function.
it will generate WARNING :
Do not mutate state directly. Use setState() react/no-direct-muta
tion-state