ReactJs Tutorials
What is State in ReactJs?
State represents the value of a dynamic properties of a React component at a given instance. React provides a dynamic data store for each component. The internal data represents the state of a React component and can be accessed using this.state member variable of the component. Whenever the state of the component is changed, the component will re-render itself by calling the render() method along with the new state.
The state data is a private object and is used within components inside a class.
The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components.
A simple example to better understand the state management is to analyse a real-time clock component. The clock component primary job is to show the date and time of a location at the given instance. As the current time will change every second, the clock component should maintain the current date and time in it’s state. As the state of the clock component changes every second, the clock’s render() method will be called every second and the render() method show the current time using it’s current state.
State Methods:-
A state must be kept as simple as possible. It can be set by using the setState() method and calling setState() method triggers UI updates. A state represents the component's local state or information. It can only be accessed or modified inside the component or by the component directly. To set an initial state before any interaction occurs, we need to use the getInitialState() method.
File name : index.php
setState()
getInitialState()
Defining State
To define a state, you have to first declare a default set of values for defining the component's initial state. To do this, add a class constructor which assigns an initial state using this.state. The 'this.state' property can be rendered inside render() method.
File name : index.php
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>ItTutorial is one of the best IT training institute in Delhi.</h3></p>
</div>
) : null;
return (
<div>
<h1> Welcome to ItTutorial!! </h1>
{ bio }
</div>
);
}
}
export default App;
In Above Example, we can create a stateful component using ES6 syntax
To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.
Changing the State
We can change the component state by using the setState() method and passing a new state object as the argument. Now, create a new method toggleDisplayBio() in the above example and bind this keyword to the toggleDisplayBio() method otherwise we can't access this inside toggleDisplayBio() method.
File name : index.php
this.toggleDisplayBio = this.toggleDisplayBio.bind(this);
Example
add a button to the render() method. Clicking on this button triggers the toggleDisplayBio() method which displays the desired output.
File name :
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 Ittutorial!!</h1>
{
this.state.displayBio ? (
<div>
<p><h4>Ittutorial is one of the best PHP training Tutorial. React is a JavaScript library for building reusable UI components. it is created and maintained by Facebook. Facebook developed ReactJS in 2011, but it was released to the public in the month of May 2013.</h4></p>
<button onClick={this.toggleDisplayBio}> Show Less </button>
</div>
) : (
<div>
<button onClick={this.toggleDisplayBio}> Read More </button>
</div>
)
}
</div>
)
}
}
export default App;
setState :- Example
File name :
A simple example to set / update name is as follows −
this.setState( { name: 'John' } )
The signature of the setState with function is as follows −
this.setState( (state, props) =>
... function returning JavaScript object ... );
Here, state refers the current state of the React component
props refers the current properties of the React component.
Stateful & Stateless :-
React component with internal state is called Stateful component and React component without any internal state management is called Stateless component.
React does not share the state with child component. The data needs to be passed to the child component through child’s properties.
File name :
import React from 'react';
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
}
setInterval( () => this.setTime(), 1000);
}
setTime() {
console.log(this.state.date);
this.setState((state, props) => (
{
date: new Date()
}
))
}
render() {
return (
<div>
<p>The current time is {this.state.date.toString()}</p>
</div>
);
}
}
export default Clock;
Next, create a file, index.js under the src folder and use Clock component.
import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './components/Clock';
ReactDOM.render(
<React.StrictMode>
<Clock />
</React.StrictMode>,
document.getElementById('root')
);
Finally, create a public folder under the root folder and create index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Clock</title>
</head>
<body>
<div id="root"></div>
<script type="text/JavaScript" src="./index.js"></script>
</body>
</html>
File name :
File name :
File name :