React State
- The state is a dynamic structure used to store and manage data or information within a component, and it can change over time in response to user actions or system events. Components that manage their own state are called stateful components. The state is central to a React component, shaping its behavior and rendering. It enables components to be interactive and responsive.
- State should be kept as simple as possible. It can be updated using the `setState()` method, which also triggers UI updates. State represents the component's local information and can only be accessed or modified within the component itself. To define an initial state before any interactions take place, you should use the `getInitialState()` method.
- For example, if we have five components that require data or information from the state, we should create a single container component to manage the state for all of them.
Defining State
To define a state, you first need to declare a default set of values for the component's initial state. This is done by adding a class constructor that assigns the initial state using `this.state`. The `this.state` property can then be accessed and rendered inside the `render()` method.
Example
The sample code below demonstrates how to create a stateful component using ES6 syntax.
import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { displayBio: true };
}
render() {
const bio = this.state.displayBio ? (
<div>
<p><h3>Gocourse is the best learning website for students,beginners,etc...</h3></p>
</div>
) : null;
return (
<div>
<h1> Welcome to Gocourse!! </h1>
{ bio }
</div>
);
}
}
export default App;
Output
Changing the State
We can update the component state using the `setState()` method by passing a new state object as an argument. To implement this, create a new method called `toggleDisplayBio()` in the example above and bind the `this` keyword to `toggleDisplayBio()`; otherwise, `this` will not be accessible inside the `toggleDisplayBio()` method.
this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
Example
import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { displayBio: false };
console.log('Component this', this);
this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
}
toggleDisplayBio(){
this.setState({displayBio: !this.state.displayBio});
}
render() {
return (
<div>
<h1>Welcome to Gocourse!!</h1>
{
this.state.displayBio ? (
<div>
<p><h4>Gocourse is the best learning website for students,beginners,etc...
</h4></p>
<button onClick={this.toggleDisplayBio}> Show Less </button>
</div>
) : (
<div>
<button onClick={this.toggleDisplayBio}> Read More </button>
</div>
)
}
</div>
)
}
}
export default App;
Output
When you click the Read More button, you will get the below output, and when you click the Show Less button, you will get the output as shown in the above image.
