Explain the Concept of State in react js

In React.js, "state" refers to an object that holds the dynamic data of a component. It represents the current state of the component and can be updated over time. State allows components to manage and track changes to their data, which in turn triggers updates to the user interface.

The state object is specific to each instance of a component. When the state changes, React automatically re-renders the component, ensuring that the user interface reflects the updated state.

State is typically used to store data that can change, such as user input, fetched data from an API, or the result of user interactions. By using state, components can be interactive and respond to user actions or external events.

In React, you can define and update state using either class components or functional components with hooks. Class components have a state property that holds the state object, while functional components use the useState hook to create and update state.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      age: '',
      height: ''
    };
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  handleAgeChange = (event) => {
    this.setState({ age: event.target.value });
  };

  handleHeightChange = (event) => {
    this.setState({ height: event.target.value });
  };

  render() {
    return (
      <div>
        <h1>Personal Information</h1>
        <form>
          <label>
            Name:
            <input type="text" value={this.state.name} onChange={this.handleNameChange} />
          </label>
          <br />
          <label>
            Age:
            <input type="number" value={this.state.age} onChange={this.handleAgeChange} />
          </label>
          <br />
          <label>
            Height:
            <input type="text" value={this.state.height} onChange={this.handleHeightChange} />
          </label>
        </form>
        <h2>Entered Information:</h2>
        <p>Name: {this.state.name}</p>
        <p>Age: {this.state.age}</p>
        <p>Height: {this.state.height}</p>
      </div>
    );
  }
}

export default MyComponent;

In this updated code, we added three input fields for name, age, and height within the form. Each input field is associated with a respective state variable (name, age, height). The handleNameChange, handleAgeChange, and handleHeightChange methods are responsible for updating the respective state variables when the user types in the input fields.

Now, when you run the code, you will see the input fields for name, age, and height. As you type in each input field, the corresponding state variable will be updated, and the entered information will be displayed in the "Entered Information" section below the form.

Another Example

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      message: 'Hello'
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <p>Message: {this.state.message}</p>
      </div>
    );
  }
}

And here's an example of using state in a functional component with the useState hook:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('Hello');

  return (
    <div>
      <p>Count: {count}</p>
      <p>Message: {message}</p>
    </div>
  );
};

Debug School

Explain the Concept of State in react js

Top comments (0)