What Is State In React JS ?

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

1. With Constructor
2. Without Constructor

Difference B/W Props And State

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