What Is State in React JS ?
In React JS, the state is a built-in React object that is used to contain data or information about the component.


State in ReactJS ?
- In React JS, a component’s state can change over time, whenever it changes, the component re-renders.
- In React JS, the change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.
- In React JS, Constructor is used to initialize the object’s state.
Important Points Regarding State
- In React JS, state is similar to props, but it is private and fully controlled by the component.
- In React JS, we can create state only in class component.
- In React JS, it is possible to update the state.
- In React JS, a state can be modified based on user action or network changes
- In React JS, every time the state of an object changes, React re-renders the component to the browser
- In React JS, the state object is initialized in the constructor
- In React JS, the state object can store multiple properties
- In React JS, we can update state on a button click
- In React JS, this.setState() is used to change the value of the state object.
- In React JS, we can set props data to state.
The setState() Method
- In React JS, state can be updated in response to event handlers, server responses or props changes, this is done using the setState() method.
- In React JS, the setState() method enqueues all of the updates made to the component state and instructs React to re-render the component and its children with the updated state.
- In React JS, always use the setState() method to change the state object, since it will ensure that the component knows it’s been updated and calls the render() method.
There Are 2 Ways Of Initialize State
- With Constructor
- Without Constructor
Difference B/W Props And State
PROPS | STATE |
---|---|
In React JS, Props get passed to the component. | In React JS, State is created and managed within the component. |
Function Parameters. | Variables. |
Props are immutable / un-changeable | State is mutable / changeable. |
props -> Functional Components | useState Hook –> Functional Components. |
this.props -> Class Components | this.state -> Class Component |
Employee.js Component File – Source Code
import React, { Component } from 'react'
export default class Employee extends Component {
state = {
name:"Learning Never Ends",
age: 23,
surname: "Ansari"
// name: 1
}
// constructor(props){
// super(props);
// this.state = {
// name: this.props.name,
// age: 23,
// surname: "Ansari"
// // name: 1
// }
// }
changeName() {
this.setState({
name: "Welcome To Our Channel",
age: 33,
surname: "Qureshi"
// name: this.state.name + 1
})
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
<h1>{this.state.age}</h1>
<h1>{this.state.surname}</h1>
<input type="button" value="Click" onClick={() => this.changeName()} />
</div>
)
}
}
Index.js File – Source Code
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Employee from './Employee';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Employee name="Adil"/>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Download Notes & Source Code Of This Blog From The Link Given Below
https://www.mediafire.com/file/ka9kse9hja4rodz/STATE+in+react+js.rar/file
No responses yet