Passing Components and Properties in React

In this tutorial, we will explore how to pass components and properties (props) in React. Props are one of the key features of React that allow you to create dynamic and reusable components by passing data between them. This content was originally created in 2016, and we have included some updates to reflect the current best practices in React.

What are Props?

Props (short for properties) are read-only inputs that allow you to pass data from a parent component to a child component. They are essential for building interactive and dynamic React applications.

Props make it easy to create reusable components. Instead of hardcoding data into a component, you can pass the data via props, making your component more flexible.

Example of Using Props

Here’s an example of a simple component called Greeting that accepts a name prop:

import React from 'react';

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

export default Greeting;

You can use the Greeting component and pass different values for name like so:

<Greeting name="Alice" />
<Greeting name="Bob" />

The output will vary based on the prop passed, such as "Hello, Alice!" or "Hello, Bob!".

Critical Update (2024): Today, it's common to destructure props directly in the function parameters for cleaner code:

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

Passing Components as Props

In React, you can even pass components as props, which allows you to build more flexible and composable UIs. Here's an example where we pass a Welcome component as a prop to another component.

Example of Passing Components as Props

import React from 'react';

function Welcome() {
  return <h2>Welcome to the tutorial!</h2>;
}

function Page({ header }) {
  return (
    <div>
      {header}
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default function App() {
  return (
    <Page header={<Welcome />} />
  );
}

In this example, the Page component accepts a header prop, which can be any valid React element. We pass the Welcome component as the header prop when rendering the Page component.

Note: Passing components as props allows for highly customizable and flexible layouts, helping to build composable UIs.

Using Default Props

Sometimes you want to provide a default value for props if they are not explicitly provided by the parent component. React allows you to set default props for this purpose.

Example of Default Props

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

In this example, if no name prop is provided, the component will default to "Guest".

Critical Update (2024): Default props for functional components can be set directly within the function parameter as shown above, making the code more concise.

Conclusion

In this tutorial, we covered the basics of passing components and properties in React. You learned how props can be used to pass data between components, making your React application more dynamic and interactive. We also explored passing components as props and how to use default props.

As React has evolved since 2016, destructuring props and using functional components with hooks are now considered best practices for writing cleaner and more maintainable code.

For more tutorials and to continue your learning journey, visit the full course at 02geek.