What Are Props in React?

Props are read-only inputs passed to a React component. They are used to pass dynamic values like strings, arrays, objects, or functions, making components flexible and reusable.

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

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

export default App;

• The Greet component receives the name prop from the App component.
• It dynamically renders "Hello, Amit!" inside the <h1> tag.

How Do Props Work in React?

Props follow a top-down (unidirectional) data flow. The parent component supplies the values, and the child component receives and uses them.

Key Characteristics of Props

• Immutable: Props cannot be modified by the receiving component.
• Read-Only: They are strictly for reading data and should not be altered.
• Dynamic: Props can be updated when the parent component’s state changes.

Using Props with Multiple Values

You can pass multiple props to a component by adding multiple attributes.

import React from "react";

function Profile(props) {
    return (
        <div>
            <h1>Name: {props.name}</h1>
            <p>Age: {props.age}</p>
        </div>
    );
}

function App() {
    return <Profile name="Raj" age={25} />;
}

export default App;

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

Default Props in React

You can set default values for props using the defaultProps property.

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

Greet.defaultProps = {
    name: "Guest",
};

function App() {
    return <Greet />;
}

export default App;

• If no name is passed, the default value "Guest" is used.
• This ensures the component doesn’t break when props are not provided.

Props in Class Components

In class components, props are accessed using this.props.

import React, { Component } from "react";

class Welcome extends Component {
    render() {
        return <h1>Welcome, {this.props.name}!</h1>;
    }
}

function App() {
    return <Welcome name="Anjali" />;
}

export default App;

• The Welcome class component receives the name prop via this.props.
• It dynamically renders "Welcome, Anjali!" inside the <h1> tag.

Passing Functions as Props

You can pass functions as props to handle events or perform actions in child components.

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

function App() {
    const handleClick = () => {
        alert("Button clicked!");
    };

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

export default App;

• The Button component receives a handleClick function as a prop.
• Clicking the button triggers the alert.

Children Prop

The children prop allows you to pass elements or components as children of another component.

function Wrap(props) {
    return <div className="Wrap">{props.children}</div>;
}

function App() {
    return (
        <Wrap>
            <h1>Hello, World!</h1>
        </Wrap>
    );
}

export default App;

• The Wrapper(Wrap) component uses props.children to render its child elements.
• It wraps the <h1> tag inside a div.