Understanding Props in React

Props, short for properties, are React’s way of passing data from parent to child components. They function similarly to arguments in JavaScript functions, allowing you to send values into a component as attributes.

When you need to create multiple instances of a single component with different values, props become essential. They enable you to customize each instance of a component, making your React applications more dynamic and flexible.

Let’s revisit our previous example of Book and BookList to illustrate how props work:

const BookList = () => {
  return (
    <div>
      <Book />
      <Book />
    </div>
  );
};
 
const Book = () => {
  return (
    <div>
      <h1>Book name : Cracking The Coding Interview</h1>
      <h2>Author : Gayle Laakmann McDowell</h2>
    </div>
  );
};

In this code block, we’ve hard-coded the book name and author values, which isn’t particularly helpful for representing different books.

We can think of a component as a function and props as its arguments. By providing specific values for each component and using those values within the component body, we can create more versatile and reusable components.

Let’s examine how to pass props:

const BookList = () => {
  return (
    <div>
      <Book bookName="Cracking The Coding Interview"
            author="Gayle Laakmann McDowell" />
      <Book bookName="The Road to Learn React"
            author="Robert Wieruch" />
    </div>
  );
};

Here, we’ve created prop-like structures (bookName, author) and assigned their respective values. That’s all there is to it! These are props.

Now, let’s explore how to access and use these props within the component body:

const Book = (props) => {
  return (
    <div>
      <h1>Book name : {props.bookName}</h1>
      <h2>Author : {props.author}</h2>
    </div>
  );
};

First, we use the keyword props as a parameter in the arrow function. This parameter acts as an object containing all the passed properties. We can then access these prop values just like we would access object properties using dot notation: object.property.

That’s why we use props.bookName and props.author. Each book instance receives its respective values this way, allowing us to create multiple unique instances of the Book component.

While this method of using props works well, there’s an alternative approach to accessing props. This other method involves using object destructuring—a technique for extracting individual properties from an object.

const Book = (props) => {
  const {bookName, author} = props;
  return (
    <div>
      <h1>Book name : {bookName}</h1>
      <h2>Author : {author}</h2>
    </div>
  );
};
 
//or more efficiently
 
const Book = ({bookName, author}) => {
  return (
    <div>
      <h1>Book name : {bookName}</h1>
      <h2>Author : {author}</h2>
    </div>
  );
};

Children Props

In React, there are instances where we need to add a specific element to a particular component instance only. This is where children props come into play. We pass the desired element between the opening and closing tags of the component. These elements, nestled within the component tags, become accessible as “children props” within the component.

const BookList = () => {
  return (
    <div>
      <Book bookName = "Cracking The Coding Interview"
      author = "Gayle Laakmann McDowell">
          <button> Read Now! <button/>
      < Book />
      <Book bookName = "The Road to Learn React"
      author = "Robert Wieruch"/>
    </div>
  );
};

In the code block above, we’ve added a button only to the first Book instance. This is achieved by passing the button element as a child component between the opening and closing tags of the Book component.

Let’s see how to access them:

const Book = ({bookName, author, children}) => {
  return (
    <div>
      <h1>Book name : {bookName}</h1>
      <h2>Author : {author}</h2>
      {children}
    </div>
  );
};

We simply add children to the parameters and use {children} in the component wherever we want to place child props. In this case, I placed the button below the book information by adding {children} after bookName and author.

This approach renders child props between opening and closing tags only when specified, serving our purpose perfectly.

When we want an element to appear in just one instance of a component, we can use children props. We can then access these props either through props.children or by destructuring them for direct use.

It will look like:

Children Props

As you can see, only the first instance has the button below its information. This demonstrates how children props can be useful.

Key Props

A key is a special attribute you must include when creating lists of elements in React. Keys give identity to elements in lists. You need to specify a unique id or value for each component instance to track additions or removals.

When choosing keys for list items, try to use a unique id for each instance. If an id isn’t provided or you can’t use it for some reason, you can use the list index as a fallback.

const App = () => {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <>
      {numbers.map((number) => {
        return <li>{number}</li>;
      })}
    </>
  );
};

In the above code block, we’re iterating over a list of numbers. Everything seems to work fine until we open the console. It’s filled with red text – a warning that says: 'Warning: Each child in a list should have a unique "key" prop.'

Since we don’t have a specified id in this case, we can use the list’s index as a key. We can access this index through the second argument of the map function.

const App = () => {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <>
      {numbers.map((number, index) => {
        return <li key={index}> {number} </li>;
      })}
    </>
  );
};

This code block works fine and all warnings are gone now.

Components in React Docs