How to Pass Props in React

In React, props (short for “properties”) are a way to pass data from a parent component down to a child component. Props allow components to communicate and share information with each other. Below are detailed steps on how to pass and use props in React.

1. Passing Props from Parent Component to Child Component

The basic way to pass props is to send a value or an object as an attribute in the child component’s JSX.

// Parent Component
function ParentComponent() {
  return (
    

      
This is the Parent Component
      
    
  );
}

// Child Component
function ChildComponent(props) {
  return 
{props.message}
;
}

Explanation:

• ParentComponent passes a prop named message to ChildComponent.
• ChildComponent receives the value of message through the props object and renders it inside a <p> tag.

2. Passing Multiple Props

You can pass multiple props to a child component. Here’s an example of passing several values at once.

// Parent Component
function ParentComponent() {
  return (
    

      
User Information
      
    
  );
}

// Child Component
function UserProfile(props) {
  return (
    

      
Name: {props.name}
      
Age: {props.age}
      
Country: {props.country}
    
  );
}

Explanation:

• ParentComponent passes three props (name, age, and country) to UserProfile.
• UserProfile uses these props to display user information.

3. Using Destructuring with Props

Instead of using props.name and props.age, you can use destructuring to extract the values directly from props.

// Parent Component
function ParentComponent() {
  return (
    

      
User Information
      
    
  );
}

// Child Component
function UserProfile({ name, age, country }) {
  return (
    

      
Name: {name}
      
Age: {age}
      
Country: {country}
    
  );
}

Explanation:

• In UserProfile, instead of receiving props as an object, we can destructure directly in the function parameters ({ name, age, country }) to access each prop.

4. Passing Functions as Props

Besides values, you can also pass functions from a parent to a child component to handle events or interactions.

// Parent Component
function ParentComponent() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    

      
Passing a Function to a Child Component
      
    
  );
}

// Child Component
function Button(props) {
  return Click Me!;
}

Explanation:

• ParentComponent defines a handleClick function and passes it to Button as an onClick prop.
• Button calls the onClick function from props when the button is clicked.

5. Setting Default Values for Props

You can provide default values for props in a child component using defaultProps.

// Child Component
function UserProfile({ name, age, country }) {
  return (
    

      
Name: {name}
      
Age: {age}
      
Country: {country}
    
  );
}

// Set default values for props
UserProfile.defaultProps = {
  name: "Unknown",
  age: 0,
  country: "Not specified"
};

Explanation:

• defaultProps allows you to set default values for props if no value is passed from the parent component.

Summary

• Props are used to pass data from a parent to a child component in React.
• Props can be any type of value: strings, numbers, functions, or even other components.
• You can use destructuring to access props more easily inside a component.
• Props can include callback functions to handle events.
• defaultProps lets you set fallback values when a prop is not provided.

Read more: