A Simple Guide to Component Props in React

To start using React, you don't need to learn a lot. Master the concepts of components, state, props, and hooks, and you'll be on your way.

1. The Component Props

A component is an encapsulated piece of logic. For instance, here's a simple component that displays a "Hello, World!" message:

function HelloWorld() {
  return <span>Hello, World!</span>;
}

// Render
<HelloWorld />

// Output
<span>Hello, World!</span>

The problem with <HelloWorld /> is that it is inflexible. You cannot change the greeting person, e.g., use "Joker" instead of "Earth."

You can solve this issue using component props.

Let's enhance the <HelloWorld /> component by adding a prop who to customize the person being greeted. We'll rename the new component to <Hello>.

There are 2 steps to add the who prop to the <Hello /> component:

1. Make the function of your component read the props from the props parameter:

   function Hello(props) {
     return <div>Hello, {props.who}!</div>;
   }

Now the Hello function has a props parameter. React will ensure that the props object contains all the props you assign to the component.

1. When rendering the component, add the prop using attribute-like syntax:

   // Render
   <Hello who="Earth" />

   // Output
   <div>Hello, Earth!</div>

You can use any value for the who prop. For example, let's greet "Mars":

   // Render
   <Hello who="Mars" />

   // Output
   <div>Hello, Mars!</div>

That's all you need to know to use React props!

1.1 Multiple Props

You can use as many props as you like. For example, let’s make the <Message /> component accept 2 props to customize the greeting message and the person:

function Message({ greet, who }) {
  return <div>{greet}, {who}!</div>;
}

// Render
<Message greet="Welcome" who="Aliens" />

// Output
<div>Welcome, Aliens!</div>

1.2 Class Component Props

If you use class-based components, you can access the props from this.props:

import { Component } from 'react';

class HelloAsClass extends Component {
  render() {
    return <div>Hello, {this.props.who}!</div>;
  }
}

// Render
<HelloAsClass who="Earth" />

// Output
<div>Hello, Earth!</div>

2. Values of Props

Props can be various types of values, including numbers, booleans, objects, arrays, and even variables. React doesn't restrict prop values but requires non-string literals to be wrapped in curly braces:

• String literals:

  <MyComponent prop="My String Value" />

• Template literals with variables:

  <MyComponent prop={`My String Value ${myVariable}`} />

• Number literals:

  <MyComponent prop={42} />

• Boolean literals:

  <MyComponent prop={false} />

• Plain object literals:

  <MyComponent prop={{ property: 'Value' }} />

• Array literals:

  <MyComponent prop={['Item 1', 'Item 2']} />

• JSX:

  <MyComponent prop={<Message who="Joker" />} />

• Variables:

  <MyComponent prop={myVariable} />

3. Passing Down Props

Inside a component, you can use props like any regular JavaScript variable. You can render conditionally or pass props to other components.

For instance, let’s create a <HelloPeople /> component that accepts a list of persons and passes each person to the <Hello /> component:

function HelloPeople({ persons }) {
  return (
    <div>
      {persons.map((person, index) => (
        <Hello who={person} key={index} />
      ))}
    </div>
  );
}

// Render
<HelloPeople persons={['Joker', 'Batman']} />

// Output
<div>
  <div>Hello, Joker!</div>
  <div>Hello, Batman!</div>
</div>

4. Optional Props

Sometimes you have a good default value for a prop. You can omit the prop and specify a default value inside the component:

function HelloOptional({ who = 'Unknown' }) {
  return <div>Hello, {who}!</div>;
}

// Render
<HelloOptional />

// Output
<div>Hello, Unknown!</div>

// With specified prop
<HelloOptional who="Batman" />

// Output
<div>Hello, Batman!</div>

5. Props Spread Syntax

If you dynamically construct the props of a component, you might use a plain JavaScript object:

const hiBatman = { greet: 'Hi', who: 'Batman' };

function Message({ greet, who }) {
  return <div>{greet}, {who}!</div>;
}

// Render
<Message {...hiBatman} />

// Output
<div>Hi, Batman!</div>

6. Special Props

While you can use any prop names, React has some properties with special uses:

6.1 children

children is a special property assigned by React with the content of the component:

function Parent({ children }) {
  console.log(children); // logs <span>I'm a child!</span>
  return <div>{children}</div>;
}

// Render
<Parent>
  <span>I'm a child!</span>
</Parent>

// Output
<div><span>I'm a child!</span></div>

6.2 key

The key prop helps React identify which items have changed, are added, or are removed:

function HelloPeople({ persons }) {
  return (
    <div>
      {persons.map((person, index) => (
        <Hello who={person} key={index} />
      ))}
    </div>
  );
}