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.


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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to use @supports rule in CSS?CSSMoving folders in WordPress using codeWordPressperspective property in CSSCSSCreate a simple bar chart and column chart using pure CSS gridCSSHow to check if the element exists using JavaScript and jQuery?JavaScriptNew to  Drupal? Here’s What You Need to KnowDrupalAttributes and Properties in JavaScript and HTMLHTMLHow to clean up after a plugin uninstall in WordPress?WordPressValues and Types Basics in JavaScriptJavaScriptCSS Overflow Property with ExamplesCSSKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousSQL Basics: What does the asterisk (*) mean in a query?SQL/MySQL