React

React key and list functionalities

How to render multiple components

You can build a list of elements and then simply include them in JSX using curly brackets {}.

Here I am creating a list of letters in an element listItems and then rendering that listItems element.

const letters = ['a', 'b', 'c', 'd', 'e'];
const listItems = letters.map((letter) =>
  <li>{letter}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

See the live example here. https://codepen.io/anilpank/pen/MWgLdyy

When you run this code you will get a warning in console.

Warning: Each child in a list should have a unique ‘key’ prop See https://fb.me/react-warning-keys for more information

A key is a special string attribute that you need to add to every list item. They key should be unique for that item in complete list. (No two items in the list should have same key).

function LetterList(props) {
  const letters = props.letters;
  const listItems = letters.map((letter) =>
    <li key={letter}>
      {letter}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = ['a', 'b', 'c', 'd', 'e'];
ReactDOM.render(
  <LetterList letters={letters} />,
  document.getElementById('root')
);

See it live in action here. https://codepen.io/anilpank/pen/eYOxaLE

You should see that warning in console is gone now.

So why are keys important in React. Keys help React know which items have changed (added, removed, edited) in a list. So what should you use as keys? The best candidate should be ids for each list item. In case you don’t have ids, you can use anything that is unique for each line item. If you don’t have anything unique for each item in the list, then you can resort to using item index.

const wonderList = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

Component extract with keys

A rule to follow here is elements inside the map call should have keys. Let’s explain the same with a bad and good example.

Bad example

We should not specify key in an Item component of the list. (Here the component is Student). The key needs to be specified when we are creating Items (in our case Students) from array.

function Student(props) {
   const name= props.name;
   return (
    // Wrong! There is no need to specify the key here:
     <li key={name}>
       {name}
     </li>
  );
}

function NameList(props) {
  const names = props.names;
  const students = names.map((name) =>
    // Wrong! The key should have been specified here:
    <Student name={name} />
  );
  return (
    <ul>
      {students}
    </ul>
  );
}

const names = ['John', 'Mary', 'David', 'Joe', 'Ryan'];
ReactDOM.render(
  <NameList names={names} />,
  document.getElementById('root')
);

See it live here. https://codepen.io/anilpank/pen/bGbJGBp

Good Example

function Student(props) {
   const name= props.name;
   return (
    // Correct! No key is specified here:
     <li>
       {props.name}
     </li>
  );
}

function NameList(props) {
  const names = props.names;
  const students = names.map((name) =>
    // Correct! The key has been specified here:
    <Student key={name} name={name} />
  );
  return (
    <ul>
      {students}
    </ul>
  );
}

const names = ['John', 'Mary', 'David', 'Joe', 'Ryan'];
ReactDOM.render(
  <NameList names={names} />,
  document.getElementById('root')
);

See it live in action here. https://codepen.io/anilpank/pen/LYPvgby

Keys need not be globally unique

Keys need to be unique only respective to their arrays. They need not be gloabally unique. Keys are just hint to react components. They don’t get passed on to your components. In case you want to use the keys, you also need to pass them as props.

You can embed map in JSX

Well you can literally embed any javascript expression on JSX but let’s discuss embedding map first.

Consider the example below.

function NameList(props) {
  const names = props.names;
  const listItems = names.map((name) =>
    <ListItem key={name}
              value={name} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

JSX allows putting any expression in curly brackets {}. Below example shows how to embed a map in curly brackets.

function NameList(props) {
  const names = props.names;
  return (
    <ul>
      {names.map((name) =>
        <ListItem key={name}
                  name={name} />
      )}
    </ul>
  );
}

See it live in action here. https://codepen.io/anilpank/pen/XWrQxOM

Generally I would not recommend this. As a rule of thumb if logic inside a map becomes complicated, then you should go ahead an extract a component out of it.

[mc4wp_form id=”449"]

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

About anil

Hi, I'm Anil Verma. I have a passion for teaching and developing awesome front end apps. I was involved in development of post processor for Nastran(built by NASA). More recently I have been building supply chain apps at E2open.
View all posts by anil →

Leave a Reply

Your email address will not be published. Required fields are marked *