What is React State ?

In React, “state” refers to an object that holds data or information that can change over time. It represents the dynamic part of a React component, allowing the component to keep track of and manage its own data. State is a fundamental concept in React, and it is used to build dynamic and interactive user interfaces.

Here are some key points about React state:

1. Stateful Components: State is primarily associated with class-based components and functional components that use React hooks. Functional components using the useState hook can also manage state. Stateful components maintain and manage their own state data, allowing them to re-render when the state changes.
2. Initialization: To use state in a React component, you typically initialize it in the component’s constructor (for class components) or using the useState hook (for functional components). You provide an initial value for the state, and React takes care of updating and rendering the component when the state changes.
3. Updating State: You can update the state using special methods like this.setState() (for class components) or the state updater function returned by useState() (for functional components). When the state is updated, React will automatically re-render the component, reflecting the changes in the user interface.

Here’s a simple example of state in a functional component using the useState hook:

import React, { useState } from 'react';

function Counter() {
  // Initialize the 'count' state with an initial value of 0
  const [count, setCount] = useState(0);

  // Event handler to update the 'count' state
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example, the count variable represents the component’s state, and setCount is used to update the state. When the “Increment” button is clicked, the increment function is called, updating the state and causing the component to re-render, which, in turn, updates the displayed count in the user interface.

React state is essential for building dynamic and interactive applications, as it allows components to respond to user input, data changes, and other events, resulting in a more engaging user experience.

• React State is an inbuilt object of the Rect Component
• React State is that object Where we store the properties of React component value
• Changing in React State re-rendering takes place

Whare is React State is initialize?

React State is initialized in React Component Constructor

Example

class Name extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: "yashpal"};
  }
  render() {
    return (
      <div>
        <h1>My name</h1>
      </div>
    );
  }
}

Multiple Properties in React State we can store

Example

class Name extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name1: "yashpal",
      name2: "christo"
    };
  }
  render() {
    return (
      <div>
        <h1>All names</h1>
      </div>
    );
  }
}

How to use React State in Component?

Syntax

this.state.propertyname

Example

class Name extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name1: "yashpal",
      name2: "christo",
      name3: "killian",
      name4: "thanos"
    };
  }
  render() {
    return (
      <div>
        <h1>My name is  {this.state.name1}</h1>
        <h2>
          my second name is {this.state.name2}     
        </h2>
      </div>
    );
  }
}

What is setState() in react Component?

setState() is used to change the properties of React Component State properties

Example

class Name extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name1: "yashpal",
      name2: "christo"
    };
  }
  changeName= () => {
    this.setState({name2: "killian"});
  }
  render() {
    return (
      <div>
        <h1>My  name is {this.state.name1}</h1>
       <h2>my another name is  {this.state.name2} </h2>
        <button
          type="button"
          onClick={this.changeName}
        >Change name</button>
      </div>
    );
  }
}

Output:

After click my another name christo will get change to killian