× logo Home HTML CSS Javascript React-App Angular.js logo

The React State

How to interact with the state of your components

States are the source of data for React components. In other words.
They are objects responsible for determining components behavior and rendering, as such, they must be kept as simple as possible.
Accessible by means of this.state(),state is mutable and creates dynamic and interactive components.
Use of a state can be visualized by the following code snippet:

State is referred to the local state of the component which cannot be accessed and modified outside of the component and only can be used & modified inside the component.

Setting the default state
In the Component constructor, initialize this.state.
For example the BlogPostExcerpt component might have a clicked state:

Accessing the state
The clicked state can be accessed by referencing this.state.clicked:

This is How to create State function ...with

const [ ]=useState([ { } ]);

inside our app.js

How to update the state component in React?
State of a component in React is updated with this.setState()

React Design Principles