"Component State" will allows our components to manage some data.
When the data changes the component will automatically re-render to reflect these changes.
So this will take care of re-render.
Creating the State Object:
We need to specify the state object in the constructor.
Component properties should be kept in a state. The React Components has a inbuilt state object.
The state object is where you store property values that belongs to the component.
So When state changes, the component responds by re-rendering.
Syntax:
constructor(props) {
super(props);
this.state = {
department: "Maths-Biology"
totalStudents: 10,
roomName: 'A Group'
};
}
Example:
class School extends React.Component {
constructor(props) {
super(props);
this.state = {
department: "Maths-Biology"
totalStudents: 10,
roomName: 'A Group'
};
}
render() {
return (
<div>
<h1>My {this.state.department}</h1>
<p>
Total number of students: {this.state.totalStudents}
from {this.state.roomName}.
</p>
</div>
);
}
}
Set State: (i.e Changing the state object)
To change the value in the object we use this.setState();
When the value in the state object changes the component will re-render. It means that output will change according to the newly changed value.
Always use setState() to change the state object. This will ensure that the component knows its been updated and calls the render() method.
We are not overriding the state object completely. We are just changing the specific values only.
So states automatically re-rendered.
Example: Changing the State Object
class School extends React.Component {
constructor(props) {
super(props);
this.state = {
department: "Maths-Biology"
totalStudents: 10,
roomName: 'A Group'
};
}
changeTotalStudents = () => {
this.setState({totalStudents: 100});
}
render() {
return (
<div>
<h1>My {this.state.department}</h1>
<p>
Total number of students: {this.state.totalStudents}
from {this.state.roomName}.
</p>
<button type="button" onClick={this.changeTotalStudents}>Change Number of students</button>
</div>
);
}
}
Simple challange.
- We will use state in different ways.
- Lets create a simple counter app using components.
- methods: handlePlus, handleMinus, handleReset
class Counter extends React.Component {
constructor(props) {
super(props);
this.handlePlus = this.handlePlus.bind(this);
this.handleMinus = this.handleMinus.bind(this);
this.handleReset = this.handleReset.bind(this);
this.state = {
count: 0
};
}
handlePlus() {
this.setState((prevState) => {
return {
count: prevState.count + 1
};
});
}
handleMinus() {
this.setState((prevState) => {
return {
count: prevState.count - 1
};
});
}
handleReset() {
this.setState(() => {
return {
count: 0
};
});
}
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleAdd}>+1</button>
<button onClick={this.handleMinus}>-1</button>
<button onClick={this.handleReset}>reset</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('app'));
setState is allow us to manipulate the state object.
when we use this will show data automatically when we refresh. we can use prevState to access the previous value of the state object
prevState:
handleMinus() {
this.setState((prevState) => {
return {
count: prevState.count - 1
};
});
}
.jpg)
Comments
Post a Comment