Props and Reusable Components

Introduction

So far, we’ve created a component and rendered it onto the screen. That’s cool, but what if we want our components to be more flexible and reusable? That’s where props come in.

Props (short for properties) are how we pass data from one component to another. Think of props like function arguments. They allow you to customize a component every time you use it.

Static vs Dynamic Components

Up to this point, we've only been building static components, which don't offer much customization. For example, building a simple Greeting component would look something like this:

function Greeting() {
  return <h2>Hello, welcome to my app!</h2>;
}

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}

We’ll see the same message every time: Hello, welcome to my app!

Using Dynamic Components

Instead, we can make Greeting more flexible by accepting props (I'll explain why the brackets {} are used in just a bit):

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

Now we can pass in a name prop whenever we use it:

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

This time, each Greeting shows something different:

• Hello, Alice!
• Hello, Bob!
• Hello, Charlie!

As you may have noticed above, we had to wrap props.name in curly braces. Curly braces are used to "escape" back into JavaScript. In the example above, the curly braces tells React to insert the value of props.name into <h2> tag.

You can think of curly braces as a doorway back into JavaScript. You can put almost any JavaScript expression there, like variables, math, and even function calls.

In the example above, the name is accessed by props.name because props is the object that is passed into the component. You can check this out by console logging props inside the Greetings component.

Destructuring Props

The code above works, but constantly writing props.something can get repetitive. An alternative way is destructuring props right in the function parameter:

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

Now you can use {name} directly without typing props. each time. This becomes especially useful when a component has multiple props. That said, which method you choose is up to you or whatever is being used in the existing codebase.

Taking Multiple Props

Props don’t have to be limited to just one piece of data. Let’s create a UserCard component that accepts a name, email, and phone number.

function UserCard({ name, email, phone }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "10px", margin: "10px" }}>
      <h3>{name}</h3>
      <p>Email: {email}</p>
      <p>Phone: {phone}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard 
        name="Alice Johnson" 
        email="alice@example.com" 
        phone="123-456-7890" 
      />
      <UserCard 
        name="Bob Smith" 
        email="bob@example.com" 
        phone="987-654-3210" 
      />
    </div>
  );
}

Now each UserCard displays different user information, all powered by props! In the next lesson, you'll learn how to dynamically render those cards so you're not hardcoding the props each time.