Props in React

In React, props (short for properties) are used to pass data from one component to another, typically from a parent component to a child component. Props are a core concept in React because they enable components to be dynamic and reusable. They allow you to pass values and functions into components, making them customizable and flexible.

1. What Are Props?

Props are read-only objects that allow data to be passed into components. Unlike state, which is mutable and local to a component, props are immutable and are used to pass data from a parent component to a child component.

Props are often used to:

• Display dynamic data.
• Pass functions as callbacks to child components.
• Customize the behavior or appearance of a component.

2. Passing Props

In React, data is passed to a child component through the props object. This is done by including attributes in the JSX tags when rendering the component in the parent.

Example: Passing Props from Parent to Child

// Parent Component
function Parent() {
  return <Child name="Alice" age={25} />;
}

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

In this example:

• The Parent component passes the name and age props to the Child component.
• The Child component accesses the props using props.name and props.age.

3. Accessing Props in a Child Component

Props are accessible inside the child component as an object. You can either access the props directly via props or use destructuring to make the code more concise.

Example: Accessing Props

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

Or using destructuring for cleaner code:

function Child({ name }) {
  return <h1>Hello, {name}!</h1>;
}

In this version, we directly destructure the name prop in the function parameters.

4. Props Are Read-Only

Props are immutable, meaning that a child component cannot modify its own props. If you want to update the data, the parent component must pass updated values down through props.

For example, if you want to change the name of a child component, you cannot directly update the name prop in the child. Instead, the parent component needs to change the value and pass it down again.

5. Default Props

If a prop is not passed from the parent component, you can set default values using defaultProps. This ensures that the component has a fallback value for props that are not provided.

Example: Setting Default Props

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

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

In this case, if the name prop is not provided by the parent, it will default to 'Guest'.

6. Prop Types

To ensure that your components receive the correct type of props, you can use PropTypes, a utility to validate the types of props passed to a component. This helps catch errors during development and ensures the component is used as expected.

Example: Using PropTypes for Validation

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

In this example:

• name is required and should be a string.
• age is optional and should be a number.

7. Children Prop

One of the most commonly used props is children. The children prop allows you to pass components or elements as content between opening and closing tags in JSX.

Example: Using the children Prop

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

function App() {
  return (
    <Wrapper>
      <h1>Hello, World!</h1>
      <p>This is a paragraph inside a wrapper.</p>
    </Wrapper>
  );
}

In this example:

• The Wrapper component receives the children prop and renders whatever content is passed inside the opening and closing <Wrapper> tags.
• The App component passes the children content (the h1 and p tags) into the Wrapper component.

8. Passing Functions as Props

You can also pass functions as props to child components, which allows for communication from the child to the parent component. This is useful for handling events or triggering actions in the parent.

Example: Passing a Function as a Prop

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

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

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

In this example:

• The Parent component defines the handleClick function.
• The Parent passes handleClick as a prop (onClick) to the Child component.
• The Child component calls the onClick function when the button is clicked.

9. Destructuring Props in Functional Components

You can use destructuring to extract individual props in the function’s parameters for cleaner and more readable code.

Example: Destructuring Props

function Child({ name, age }) {
  return <h1>{name} is {age} years old</h1>;
}

This approach directly extracts the name and age props and uses them inside the component.

10. When to Use Props

Props are essential in React for:

• Passing dynamic data to child components.
• Sharing data between components.
• Customizing components to behave differently depending on the data passed to them.
• Making components reusable and flexible by passing values or functions.