5. What are state and props in React?
easy

In React, State and Props are two fundamental concepts that help manage data and behavior within components.

Explanation of Key Concepts

  1. Props (Short for 'Properties'): Props are immutable values passed from a parent component to its child component.
  2. State: State is an object that stores the dynamic data used by a component, which can be updated over time.

Props

  • What are props?: Props are read-only values passed from a parent component to its child components.
  • How are props used?: Props are used to pass data from a parent component to its child components, allowing the child components to use and display this data.
  • Why do we need props?: We need props because they allow us to create modular, reusable code by passing data between components.

State

  • What is state?: State is an object that stores dynamic data used by a component, which can be updated over time.
  • How is state used?: State is used to store data that changes dynamically within a component, such as user input or data fetched from an API.
  • Why do we need state?: We need state because it allows us to create dynamic and interactive components by storing and updating data within the component.

Step-by-Step Solution

To illustrate the difference between props and state:

  1. 1. Create a parent component: Create a simple React component that passes some data to its child component.
function Parent() {
  return (
    <div>
      <Child name='John' age={30} />
    </div>
  );
}

2. Pass props to the child component: The Parent component is passing an object with two properties (name and age) to its child component.

3. Use state in the child component: Now, let's update the Child component to use state instead of props.

function Child() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>You are {age} years old.</p>
    </div>
  );
}

4. Update the state in the child component: Now we can update the state in the Child component to reflect some changes.

function Child() {
  const [name, setName] = useState('Jane');
  const [age, setAge] = useState(25);

  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>You are {age} years old.</p>
    </div>
  );
}

Example

Here's a simple example of using state and props in React:

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child name='John' age={30} />
    </div>
  );
}

function Child(props) {
  return <h2>Hello, {props.name}!</h2>;
}

In this example, the Parent component uses state to store and update its own data (the count). The Child component receives props from the Parent component but does not use state.

Conclusion

To summarize, Props are used for passing read-only values between components, while State is used for storing dynamic data within a component.

PreviousNext