Yogesh Chauhan's Blog

How to render lists inside a component in React?

in React on May 9, 2021

In the previous post we rendered list without a component.

Let’s try to change the same example and make a component that accepts an array and returns a list.

Just like this:

But that code has this warning: Each child in a list should have a unique “key” prop.

What’s a key?

In React, you need to include a string attribute when you create a list of elements. That string attribute is called a “key”.

Let’s update the code and assign a key to the list items. We need to do that inside numbers.map() function.

All we need to do is just add the code below in the li tag.


key={name.toString()}

Example: Rendering list elements with a Key

Here’s the final code without the warning:

Here is a detailed post for you:

What are keys in React?

How to embed map function in JSX?

As you can see in the example above, we have a separate listItems that is included in JSX. We can skip that step and embed the expression using JSX curly braces like this:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to animate list items using CSS and JavaScript?CSSRendering Elements in ReactReactHow to add MySQL alternate port and sockets/pipes in WordPress?WordPressUse SwiperJS to create mobile touch sliders fastMiscellaneousHow Routing works in Angular?AngularHow to activate and deactivate hooks in a WordPress plugin?WordPressCreate a responsive image gallery using CSS gridCSSColleague UI Basics: Accessing the user interfaceColleagueKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousHow to make HTML form interactive and using CSS?CSSHow to create a link tag button using CSS?CSSAvoid using new Array() in JavaScriptJavaScript