What Are 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.

Here are some features of Props:

• 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.

Note => Props can be used in both functional and class components. With functional components, props are passed as arguments to the function.

Now let's understand this with the help of example:

import React from 'react';

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

function App() {
    return <Greet name="Sneha" />;
}

export default App;

Output

• Greet Component: Accepts props and displays the value of props.name inside an <h1> tag.
• App Component: Renders the Greet component and passes the value "Sneha" to the name prop.
• Output: The Greet component shows the text Hello, Sneha! on the webpage.

How Do Props Work in React?

Here are three steps to using React props:

• Define an attribute and its value (data).
• Pass it to the child component(s) by using props.
• Render the props data.

Let’s understand the working of props with a basic example.

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

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

export default App;

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

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

export default Parent;

import React from 'react';

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

export default Child;

In this example

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

Passing Multiple Props

In React, we can pass multiple props to a child component, and each prop can contain different types of data, such as strings, numbers, arrays, or even functions. Let's understand this with the help of example

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

function App() {
    const appStyle = {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        margin: 0,
        fontFamily: 'Arial, sans-serif',
    };

    return (
        <div style={appStyle}>
            <Parent />
        </div>
    );
}

export default App;

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

function Parent() {
    const parentStyle = {
        textAlign: 'center',  
    };

    return (
        <div style={parentStyle}>
            <h1>Welcome to the Parent Component!</h1>
            <Child name="Jiya" age={25} city="New York" />
        </div>
    );
}

export default Parent;

import React from 'react';

function Child(props) {
    const childStyle = {
        marginTop: '20px',
        fontSize: '18px',
        color: '#333',
    };

    return (
        <div style={childStyle}>
            <h2>Hello, {props.name}!</h2>
            <p>You are {props.age} years old.</p>
            <p>You live in {props.city}.</p>
        </div>
    );
}

export default Child;

Output

• The Profile component receives name and age as props.
• The data is displayed dynamically in the component.

Passing Functions as Props

We can pass not only data (like strings, numbers, etc.) but also functions from a parent component to a child component using props. This is useful when we want the child component to trigger an action in the parent component.

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

function Parent() {
    const handleClick = () => {
        alert('Button clicked in Child!');
    };

    return <Child onClick={handleClick} />;
}

export default Parent;

import React from 'react';

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

export default Child;

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

function App() {
    return (
        <div>
            <Parent />
        </div>
    );
}

export default App;

In this example

• App.js renders Parent.
• Parent defines handleClick and passes it as onClick to Child.
• Child calls the onClick function when the button is clicked.

How to Set a Default Value for Props

In React, defaultProps is a special property that allows us to set default values for props. This is useful when no value is passed for a prop, ensuring the component still works with a fallback value.

import React from 'react';

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

Greeting.defaultProps = {
    name: 'Guest',
};

export default Greeting;

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

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

export default App;

In this example

• Greeting Component: It expects a name prop. If no name is passed, it will use the default value "Guest".
• App Component: The first Greeting component doesn't pass a name, so the default "Guest" is used and the second Greeting component passes the name prop as "Alia", so it will display Hello, Alia!

Destructuring Props in React

In React, props are often passed as an object to the component. Using destructuring, we can extract specific properties from this object and use them directly. This makes accessing props simpler and more concise.

Syntax

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

For more details follow this article => Destructuring of Props in ReactJS

Unidirectional Flow of Props in React

In React, props (short for properties) are used to pass data from one component to another. The flow of props in React is unidirectional, which means that data flows in only one direction: from parent components to child components.

For more details follow this article => ReactJS Unidirectional Data Flow

Difference Between State vs Prop

Below are the following difference between the state vs prop

For more details follow this article => What are the differences between props and state

Conclusion

In React, props are used to pass data from a parent to a child component, enabling communication between them. They are immutable, read-only, and flow unidirectionally. Props can hold various data types, including functions, and are essential for building dynamic and reusable components. DefaultProps ensure components work even when no props are passed, and destructuring simplifies accessing prop values. Understanding props and their role helps in managing data flow and building maintainable React applications.