DEV Community

Cover image for A Simple Guide to Component Props in React
drLacheheb
drLacheheb

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>;
   }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

   // Output
   <div>Hello, Mars!</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode
  • Template literals with variables:
  <MyComponent prop={`My String Value ${myVariable}`} />
Enter fullscreen mode Exit fullscreen mode
  • Number literals:
  <MyComponent prop={42} />
Enter fullscreen mode Exit fullscreen mode
  • Boolean literals:
  <MyComponent prop={false} />
Enter fullscreen mode Exit fullscreen mode
  • Plain object literals:
  <MyComponent prop={{ property: 'Value' }} />
Enter fullscreen mode Exit fullscreen mode
  • Array literals:
  <MyComponent prop={['Item 1', 'Item 2']} />
Enter fullscreen mode Exit fullscreen mode
  • JSX:
  <MyComponent prop={<Message who="Joker" />} />
Enter fullscreen mode Exit fullscreen mode
  • Variables:
  <MyComponent prop={myVariable} />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)