Skip to main content

Creating and Nesting Your First Components (Part 2) #12

📖 Introduction​

In Part 1, we learned how to create and nest components to build a static UI. Now, we'll make our components dynamic by passing data between them using props. This is a fundamental concept for creating interactive and reusable components.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • Creating and nesting basic React components.
  • JavaScript objects and destructuring.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Foundational Theory: What props are and how they enable one-way data flow in React.
  • ✅ Core Implementation: How to pass props from a parent component to a child component.
  • ✅ Practical Application: Refactoring our "User Card" UI to use dynamic data passed through props.
  • ✅ Advanced Techniques: How to pass different types of data as props, including strings, numbers, and objects.
  • ✅ Best Practices & Anti-Patterns: Writing clean, readable components by effectively using props.

🧠 Section 1: The Core Concepts of Props​

Props (short for properties) are the way we pass data from a parent component to a child component. This is a one-way data flow, which means data flows down the component tree from parent to child.

Think of props as arguments to a function. You pass them to your component, and the component can use that data to render its UI.

Key Principles:

  • Read-Only: Props are read-only. A component must never modify its own props. This is a core principle of React that ensures a predictable data flow.
  • Data Down, Actions Up: Data flows down from parent to child via props. If a child needs to communicate back up to the parent, it does so by calling a function that was passed down as a prop (we'll cover this in a later series).
  • Dynamic Components: Props make components reusable and dynamic. You can render the same component with different data by passing it different props.

💻 Section 2: Deep Dive - Passing and Receiving Props​

Let's take our UserCard example from Part 1 and make it dynamic.

2.1 - Passing Props from a Parent​

First, let's create a parent component that will hold the data and pass it down to our UserCard.

// App.jsx

import React from 'react';
import UserCard from './UserCard'; // Assuming UserCard is in a separate file

const App = () => {
  const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    title: 'Inventor and Actress'
  };

  return (
    <div>
      <h1>User Profile</h1>
      <UserCard userData={user} />
    </div>
  );
};

export default App;

Step-by-Step Code Breakdown:

  1. const user = { ... }: We create a JavaScript object with the user's data.
  2. <UserCard userData={user} />: We render the UserCard component.
    • userData is the name of the prop we are creating.
    • {user} is the value we are passing. We use curly braces because we are passing a JavaScript object.

2.2 - Receiving Props in a Child​

Now, let's modify our UserCard, Avatar, and UserInfo components to receive and use these props.

// components/UserCard.jsx

import React from 'react';

const Avatar = (props) => {
  return (
    <img
      src={props.imageUrl}
      alt={props.name}
      width={100}
      height={100}
    />
  );
};

const UserInfo = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.title}</p>
    </div>
  );
};

const UserCard = (props) => {
  const { userData } = props;

  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <Avatar imageUrl={userData.imageUrl} name={userData.name} />
      <UserInfo name={userData.name} title={userData.title} />
    </div>
  );
};

export default UserCard;

Walkthrough:

  • UserCard component: It receives the userData object as a prop. It then passes the relevant pieces of that data down to its children, Avatar and UserInfo.
  • Avatar component: It receives imageUrl and name as props and uses them to render the <img> tag.
  • UserInfo component: It receives name and title as props and uses them to render the user's information.

This pattern of passing props down through multiple levels of components is very common in React and is sometimes called "prop drilling".

Let's expand on our example to create a gallery of user cards, demonstrating the reusability of our components.

The Goal: Render multiple UserCard components, each with different data.

The Plan:

  1. Create an array of user data in our App component.
  2. Use the .map() function to loop over the array and render a UserCard for each user.
// App.jsx

import React from 'react';
import UserCard from './components/UserCard';

const users = [
  { id: 1, name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', title: 'Inventor and Actress' },
  { id: 2, name: 'Katherine Johnson', imageUrl: 'https://i.imgur.com/MK3eW3Am.jpg', title: 'Aeronautical Engineer' }
];

const App = () => {
  return (
    <div>
      <h1>User Gallery</h1>
      {users.map(user => (
        <UserCard key={user.id} userData={user} />
      ))}
    </div>
  );
};

export default App;

Walkthrough:

  • We now have an array of users.
  • We use users.map() to iterate over the array. For each user object in the array, we return a <UserCard /> component.
  • We pass the entire user object as the userData prop.
  • key={user.id}: This is a special and important prop. When you render a list of components, you must provide a unique key prop to each one. This helps React identify which items have changed, are added, or are removed. We will cover this in more detail in a future article.

✨ Section 5: Best Practices and Anti-Patterns​

Best Practices:

  • Destructuring Props: For cleaner code, you can destructure props in the function signature: const UserInfo = ({ name, title }) => { ... }.
  • Be Specific: Pass down only the props a component needs. Don't pass down large objects if the component only needs one or two properties from it.
  • PropTypes: For larger applications, consider using PropTypes or TypeScript to validate the props your components receive.

Anti-Patterns (What to Avoid):

  • Mutating Props: Never, ever change props inside a child component. They are read-only.
  • Over-drilling: If you find yourself passing a prop through many levels of components that don't use it, it might be a sign that you need a more advanced state management solution, which we will cover later in the series.

💡 Conclusion & Key Takeaways​

You've now learned how to make your components dynamic and reusable by passing data with props. This is a fundamental skill that you will use in every React application you build.

Let's summarize the key takeaways:

  • Props Pass Data Down: Props are used to pass data from parent to child components.
  • One-Way Data Flow: Data flows in one direction, from top to bottom.
  • Props are Read-Only: A component cannot change its own props.
  • Reusability: Props allow you to reuse the same component with different data.

Challenge Yourself: Create a new Comment component that accepts author, text, and date as props. Then, render a list of several Comment components in your App component.

➡️ Next Steps​

We've built a solid foundation for creating and composing components. In the next article, "Component Reusability: The DRY Principle in React", we will explore how to think in components and build a reusable component library.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Props: Short for "properties," an object of arbitrary inputs a React component accepts.
  • One-Way Data Flow: The concept that data in React flows down from parent to child components.
  • Prop Drilling: The process of passing props down through multiple layers of nested components.
  • Key: A special string attribute you need to include when creating lists of elements.

Further Reading​