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" />;

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>;
}

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>;
    }
}

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!

Class Component Example

import React, { Component } from 'react';

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

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

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>;
}

With Destructuring

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

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>;
}

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} />;

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} />;
}

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>;

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;

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.