React Props: A Beginner’s Guide with Examples

React is a popular JavaScript library used for building user interfaces. One of the fundamental concepts in React is props, short for “properties.” Props allow us to pass data between components in a React application. In this article, we will explain what props are and how to use them step by step with examples.

What are React Props?

Props are a way to pass data between components in a React application. They are similar to function arguments in JavaScript. Props are passed down from a parent component to a child component. The child component can then use the props to render its content dynamically.

Props are read-only, which means that the child component cannot modify the props it receives. This is important because it helps maintain the integrity of the data passed between components.

How to Use Props in React?

To use props in React, we need to define them in the parent component and pass them down to the child component. Here are the steps to follow:

Step 1: Define Props in the Parent Component

First, we need to define the props in the parent component. We do this by passing the data as an attribute to the child component. Here’s an example:

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const name = "John";
  return (
    <div>
      <ChildComponent name={name} />
    </div>
  );
}

export default ParentComponent;

In this example, we define a variable name and pass it as a prop to the ChildComponent. The name prop will be accessible in the ChildComponent.

Step 2: Receive Props in the Child Component

Now that we’ve defined the props in the parent component, we need to receive them in the child component. We do this by defining a parameter in the child component’s function declaration. Here’s an example:

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>My name is {props.name}</p>
    </div>
  );
}

export default ChildComponent;

In this example, we define a parameter props in the ChildComponent function. We can then access the name prop using props.name.

Step 3: Render Props in the Child Component

Finally, we can render the props in the child component by using the {} syntax. Here’s an example:

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>My name is {props.name}</p>
    </div>
  );
}

export default ChildComponent;

In this example, we render the name prop by using the {} syntax inside the <p> tag.

Different Ways to Use Props in React

1. Accessing Props in a Child Component

The most basic use case for props is to pass data from a parent component to a child component. Here’s an example of how to do that:

import React from 'react';

function ParentComponent() {
  const name = "John";
  return (
    <ChildComponent name={name} />
  );
}

function ChildComponent(props) {
  return (
    <p>Hello, my name is {props.name}!</p>
  );
}

In this example, we pass the name prop from the ParentComponent to the ChildComponent. The ChildComponent then uses the name prop to render a message.

2. Setting Default Props

Sometimes, we want to provide default values for props in case they are not passed down from the parent component. We can do that using the defaultProps property. Here’s an example:

import React from 'react';

function ChildComponent(props) {
  return (
    <p>Hello, my name is {props.name}!</p>
  );
}

ChildComponent.defaultProps = {
  name: "Guest"
};

function ParentComponent() {
  return (
    <>
      <ChildComponent />
      <ChildComponent name="John" />
    </>
  );
}

In this example, we set a default value of “Guest” for the name prop in the ChildComponent. If the name prop is not passed down from the parent component, the ChildComponent will use the default value. In the ParentComponent, we render two instances of the ChildComponent – one with the default prop and one with a specific value.

3. Passing Functions as Props

We can also pass functions as props to child components. This is useful when we want to allow a child component to trigger an action in the parent component. Here’s an example:

import React from 'react';

function ParentComponent() {
  function handleClick() {
    console.log("Button clicked!");
  }

  return (
    <ChildComponent onClick={handleClick} />
  );
}

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

In this example, we pass the handleClick function from the ParentComponent to the ChildComponent as the onClick prop. When the user clicks the button in the ChildComponent, the handleClick function is called, which logs a message to the console.

4. Destructuring Props

When a component has several props, we can destructure them to make the code more readable. Here’s an example:

import React from 'react';

function ChildComponent(props) {
  const { name, age } = props;
  return (
    <p>Hello, my name is {name} and I am {age} years old!</p>
  );
}

function ParentComponent() {
  const person = {
    name: "John",
    age: 30
  };
  return (
    <ChildComponent {...person} />
  );
}

In this example, we destructure the name and age props in the ChildComponent. We can then use them directly in the component. In the ParentComponent, we define a person object with a name and age property. We then pass the person object to the ChildComponent using the spread operator (...). This spreads the person object into separate props, one for each property (name and age).

5. Structuring Props

We can also structure props in the parent component before passing them down to the child component. This can help to make the code more readable and easier to maintain. Here’s an example:

import React from 'react';

function ChildComponent(props) {
  const { name, age } = props.person;
  return (
    <p>Hello, my name is {name} and I am {age} years old!</p>
  );
}

function ParentComponent() {
  const person = {
    name: "John",
    age: 30
  };
  return (
    <ChildComponent person={person} />
  );
}

In this example, we structure the person object in the ParentComponent before passing it down to the ChildComponent. This makes it clear which props the child component is expecting and what data they contain.

6. Accessing Props in a Child Component

The most basic use case for props is to pass data from a parent component to a child component. Here’s an example of how to do that:

import React from 'react';

function ParentComponent() {
  const name = "John";
  return (
    <ChildComponent name={name} />
  );
}

function ChildComponent(props) {
  return (
    <p>Hello, my name is {props.name}!</p>
  );
}

In this example, we pass the name prop from the ParentComponent to the ChildComponent. The ChildComponent then uses the name prop to render a message.

Conclusion

Props are a powerful feature in React that allows us to pass data between components. By following the steps outlined in this article, you can start using props in your React applications today. Remember, props are read-only, so be sure to maintain the integrity of the data passed between components. With practice, you can become proficient in using props and building dynamic user interfaces in React.