Pass Props Between React Components

React is a popular library for building dynamic user interfaces. One of the key features of React is its component-based architecture. React components are reusable, encapsulated pieces of code that can be composed together to build complex UIs. In this article, we will explore how to pass data between React components using props.

What are Props?

Props (short for "properties") are a way to pass data from one component to another. A component can receive props as an input and use them to render its output. Props are similar to function arguments in that they allow you to customize a component's behavior.

In React, props are passed down from parent components to child components. The parent component can set the value of a prop and pass it down to its child components. The child component can then access the prop and use its value to render its output.

Here's an example of passing props from a parent component to a child component:

function Parent() {
  const name = "John";
  return <Child name={name} />;
}

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

In this example, the Parent component sets the value of the name prop to "John" and passes it down to the Child component. The Child component receives the name prop as an input and uses it to render a greeting message.

Using Props in a Child Component

To use a prop in a child component, you simply access it using the props object. For example, if you pass a prop named name to a child component, you can access it like this:

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

In this example, the child component renders a greeting message using the value of the name prop.

You can also destructure props in the function signature to make the code cleaner:

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

Passing Props to Multiple Children

You can pass props to multiple children by using the same prop name in each child component. For example:

function Parent() {
  const name = "John";
  return (
    <>
      <Child name={name} />
      <Child name={name} />
    </>
  );
}

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

In this example, the Parent component passes the same name prop to two Child components.

Passing Props to Nested Children

Props can be passed down to nested children as well. To pass a prop to a grandchild component, you can simply pass it down from the parent component to the child component, and then from the child component to the grandchild component.

function Parent() {
  const name = "John";
  return (
    <Child>
      <GrandChild name={name} />
    </Child>
  );
}

function Child(props) {
  return <div>{props.children}</div>;
}

function GrandChild({ name }) {
  return <p>Hello, {name}!</p>;
}

In this example, the Parent component passes the name prop to the GrandChild component by wrapping it in a Child component.

Updating Props

Props are read-only in React, which means that a child component cannot modify the value of a prop that it receives from its parent. However, a parent component can update the value of a prop and pass the updated value down to its child components.

Here's an example of updating a prop

function Parent() {
  const [name, setName] = useState("John");

  function handleClick() {
    setName("Jane");
  }

  return (
    <>
      <Child name={name} />
      <button onClick={handleClick}>Change Name</button>
    </>
  );
}

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

In this example, the Parent component uses the useState hook to store the value of the name prop in a state variable. When the user clicks the "Change Name" button, the handleClick function updates the value of the name state variable to "Jane". The Parent component then passes the updated name prop down to the Child component, which renders the new value of the prop.

Default Props

You can specify default values for props in case they are not passed down from the parent component. To define default props for a component, you can use the defaultProps property.

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

Child.defaultProps = {
  name: "World",
};

In this example, if the name prop is not passed down from the parent component, the Child component will use the default value of "World" instead.

Conclusion

In this article, we learned how to pass data between React components using props. Props allow you to customize a component's behavior and pass data down from parent components to child components. We saw how to use props in a child component, pass props to multiple children, pass props to nested children, update props, and define default props. By mastering props, you can create highly flexible and reusable React components that can be composed together to build complex UIs.