Understanding State and Props in React 💻🌱

React is a powerful JavaScript library for building user interfaces. Two core concepts that every React developer should understand are state and props. In this blog, we'll break down these concepts, show how to use them, and illustrate them with code examples. 🌱

What is State? 🤔

In React, state is a built-in object that stores property values that belong to a component. It is managed within the component and can change over time. State allows React components to respond to user input and render dynamic data.

Example: Managing State in a Counter Component

Let's create a simple counter component that increments the count when a button is clicked.

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable 'count' and a function 'setCount' to update the state
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation:

• useState(0) initializes the count state to 0.
• setCount(count + 1) updates the count when the button is clicked.
• React re-renders the component to display the updated count.

Output:

When you click the button, the count increases by 1 each time.

What are Props? 🛠️

*Props *(short for properties) allow you to pass data from a parent component to a child component. Props are read-only and cannot be modified by the child component—they’re used for rendering dynamic data passed from one component to another.

Example: Passing Props to a Child Component

Let’s create a component that takes a nameprop and displays a greeting message.

import React from 'react';

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

function App() {
  return (
    <div>
      <Greeting name="Anik" />
      <Greeting name="React Developer" />
    </div>
  );
}

export default App;

Explanation:

• The Greeting component accepts props as an argument.
• {props.name} dynamically renders the name passed from the parent component.
• The App component passes different names to the Greeting component.

Output:

Differences Between State and Props 📋

State and Props Together 🔗

Often, you'll use state in the parent component and pass its value down as props to the child component. Let’s see how they work together.

Example: Updating State and Passing it as Props

import React, { useState } from 'react';

function DisplayCounter(props) {
  return <h1>Current Count: {props.count}</h1>;
}

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

  return (
    <div>
      <DisplayCounter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation:

• count is managed as a state in the Counter component.
• The DisplayCounter component receives count as a prop and displays it.
• When the button is clicked, the count state is updated, and the new value is passed down to DisplayCounter as a prop.

Output:

Conclusion 📝

Understanding state and props is crucial for mastering React. State is used for managing data that changes over time, while props allow data to flow between components. By using these two concepts together, you can build interactive and dynamic user interfaces with ease.

Happy coding! 🚀 Follow me on GitHub🚀