State and Props in React

Passing Data Using Props in JSX

In React, we can use the props to transfer the data between the parent component and the child component in a dynamic way. We can pass values like strings and numbers, or even more complex objects like arrays, functions, and other React components.

Props are read-only, meaning a child component cannot change the props it receives from its parent. Props are used to communicate between components, allowing for dynamic and reusable components.

Key Points about Props:

Immutable: Props are immutable from the perspective of the receiving component.
Used for Communication: Props allow you to pass data and event handlers down the component tree.
Passed to Child Components: Props are always passed from parent to child components.

Example 1: Passing Simple Data (String, Number)

Here’s the example of passing simple data like a string or number from a parent component to a child component:


// Parent Component
function GreetingApplication() {
  return <Greeting name="Gopi" />;
}

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

Explanation: In the GreetingApplication component (parent), we pass the value “Gopi” as a prop named name to the Greeting child component. Inside the Greeting component, we access this value using props.name and render it.

Example 2: Passing Functions as Props


// Parent Component
function App() {
  const handleClickEvent = () => {
    alert("Button Clicked!");
  };

  return <Button handleClick={handleClickEvent} />;
}

// Child Component
function Button(props) {
  return <button onClick={props.handleClick}>Click Me</button>;
}

Explanation: We define a function in the parent and pass it as a prop to the child component, which uses it in an event handler.

State

Within a component, state is used to hold data that may change over time. State is mutable (changeable), in contrast to props, and is usually used for data that influences how a component is rendered.

Key Points about State:

Mutable: State can be modified using the useState hook (for functional components).
Component-specific: State is local to the component and triggers re-rendering.
Used for Interactivity: Ideal for handling dynamic data or UI responses to user actions.

Example of State:


import { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

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

Differences Between State and Props

Feature	Props	State
Definition	Immutable data passed from parent to child	Mutable data that is managed within the component
Usage	Used for passing data and event handlers	Used for managing data that changes over time
Update	Cannot be modified by the receiving component	Can be modified using `setState` or `useState`
Data Flow	Data flows from parent to child	Data is local, but can be passed to child via props
Component Type	Typically passed to functional or class components	Typically used within functional or class components

How State and Props Work Together

Props and state often work together in React applications:

Props are used to pass data from parent to child.
State is used to track and manage data within a component.


function ParentComponent() {
  const [parentMessage, setParentMessage] = useState("Hello from parent");

  return <ChildComponent message={parentMessage} />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

When to Use Props and State

Props: Use when passing data from parent to child and the child should not modify it.
State: Use when the component’s data changes over time (user input, toggles, etc.).

Conclusion

Props and state are essential concepts in React that facilitate the creation of dynamic, interactive, and reusable components. Props enable data transmission from parent to child components, creating an effective communication channel that enhances component flexibility. While props are unchangeable and meant for data transmission, state allows for the management and updating of data within a component, enabling interactivity. Grasping the differences and interrelated functions of props and state is crucial for developers to build efficient React applications that adapt to user input and maintain an up-to-date UI. By utilizing both features, React developers can construct scalable and maintainable applications with a well-organized data flow and component management.

Request more information

State and Props in React