G Gokul

Posted on Sep 7

React - Props

#react #props #propsdrilling

Props in React:

In React, props (short for "properties") are used to pass information from one component to another.
The main purpose of props is to allow a parent component to send data to its child components.
Props cannot be modified by the receiving component.
They are strictly for reading data and should not be altered.
Props can be updated when the parent component’s state changes.

Core Characteristics of Props:

Unidirectional Data Flow: Data moves in one direction only—from parent to child. A child component cannot pass props directly back up to its parent.
Immutable (Read-Only): A child component can only read the props it receives. It cannot modify them. If you need data that changes over time within a component, you should use State instead.
Makes Components Reusable: By passing different props to the same component, you can render completely different content using the exact same structural template.

props Passing Methods:

Spread syntax: Forward multiple properties at once using without listing each name individually.
Passing functions/methods: Send callbacks or event handlers from a parent to a child component so the child can trigger parent actions (e.g., ).
Passing components or JSX: Provide custom UI elements or entire components as props (like ).
Context API: Share data deeply across the component tree without prop drilling by wrapping components in a provider context.

syntax:

<ComponentName propName="value"/>

Working of Props in React:

Props in React work by allowing data to flow from a parent component to a child component, making components dynamic and reusable.

Steps to use Props:
Define an attribute and its value (data).
Pass it to the child component by using props.
Render the props data.

App.jsx

import React from 'react';
import Parent from './Parent';

function App() {
    return (
        <div>
            <Parent />  {/* Render the Parent component */}
        </div>
    );
}
export default App;

Parent.jsx

import React from 'react';
import Child from './Child';

function Parent() {
    return (
        <div>
            <h1>Welcome to the Parent Component!</h1>
            <Child name="John" />  {/* Passing the 'name' prop with value "John" */}
        </div>
    );
}
export default Parent;

Child.jsx

import React from 'react';

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

export default Child;

output:

App Component (App.js): Renders the Parent component.
Parent Component (Parent.js): Renders a heading and the Child component and passes the prop name="John" to the Child component.
Child Component (Child.js): Receives the name prop and displays Hello, John!

Default Props:

You can set fallback values in case the parent component forgets to pass a specific prop.

Passing Functions (Callbacks):

Parents can pass functions down as props. This allows a child component to trigger an event that updates the parent's state.

Destructuring Props in React:

Destructuring of Props in React lets you directly extract values from the props object, reducing the need to repeatedly use props. and making the code cleaner and easier to read.
Syntax:

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

Unidirectional Flow of Props in React:

React follows unidirectional data flow, where data is passed only from parent components to child components through props.
Child components cannot modify the props they receive, making the application easier to debug and manage.

DEV Community