REACT Props

In React, Props (short for “Properties”) are a way to pass data from a parent component to its child components. They allow components to be dynamic and reusable by passing specific values.

1. What Are Props?

  • Props are immutable—they cannot be modified by the receiving component.
  • They are used to pass data or functions as parameters.
  • Props make components reusable and enable communication between components.

2. Passing Props to Components

Props are passed to a component like attributes in HTML.

Example: Passing Props

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

// Usage
<Greeting name="John" />;

Try It Now

Here, the Greeting component receives the name prop and uses it to display “Hello, John!”

 

3. Accessing Props

In functional components, props are passed as a parameter to the function.

Accessing Props in Functional Components

function Welcome(props) {
    return <h1>Welcome, {props.username}!</h1>;
}

Try It Now

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

Accessing Props in Class Components

import React, { Component } from 'react';

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

Try It Now

4. Default Props

You can define default values for props in case no value is provided.

Functional Component Example

function Greeting({ name = "Guest" }) {
    return <h1>Hello, {name}!</h1>;
}

// Usage
<Greeting />; // Output: Hello, Guest!

Try It Now

Class Component Example

import React, { Component } from 'react';

class Greeting extends Component {
    static defaultProps = {
        name: "Guest"
    };

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

Try It Now

5. Props Destructuring

Destructuring props can make your code cleaner and more readable.

Without Destructuring

function UserCard(props) {
    return <h1>{props.firstName} {props.lastName}</h1>;
}

Try It Now

With Destructuring

function UserCard({ firstName, lastName }) {
    return <h1>{firstName} {lastName}</h1>;
}

Try It Now

6. Props in Nested Components

Props can be passed through multiple levels of components.

Example: Nested Props

function Parent() {
    return <Child message="Hello from Parent!" />;
}

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

Try It Now

7. Prop Validation

You can validate props using the prop-types library to ensure the correct data type is passed.

Example

import PropTypes from 'prop-types';

function Greeting({ name, age }) {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>Age: {age}</p>
        </div>
    );
}

Greeting.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
};

// Usage
<Greeting name="John" age={30} />;

Try It Now

8. Passing Functions as Props

You can pass functions as props to handle events or data flow.

Example

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

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

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

Try It Now

9. Children Props

The children prop is a special prop used to pass elements or components between the opening and closing tags of a component.

Example

function Wrapper({ children }) {
    return <div className="wrapper">{children}</div>;
}

// Usage
<Wrapper>
    <h1>Hello, World!</h1>
</Wrapper>;

Try It Now

10. Props vs. State

Feature Props State
Definition Data passed from parent to child Data managed within the component
Mutability Immutable Mutable
Usage Used for configuration and data Used for dynamic and interactive behavior

11. Example: Complete Props Usage

import React from 'react';

// Child Component
function UserCard({ name, age, isActive }) {
    return (
        <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Status: {isActive ? "Active" : "Inactive"}</p>
        </div>
    );
}

// Parent Component
function App() {
    return (
        <div>
            <h1>User List</h1>
            <UserCard name="John Doe" age={30} isActive={true} />
            <UserCard name="Jane Smith" age={25} isActive={false} />
        </div>
    );
}

export default App;

Try It Now

12. Best Practices for Using Props

  1. Use default props to provide fallback values.
  2. Destructure props for cleaner and more readable code.
  3. Use prop-types to validate prop types in development.
  4. Keep props minimal and focused—pass only the required data.
  5. Use the children prop for nested content.

Conclusion

Props are essential for building reusable and dynamic components in React.