YogeshChauhan . com

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

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

SQL ANY OperatorSQL/MySQLWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressHow to get Current Hour, Minute and Second in JavaScript?JavaScriptHow to create a Bootstrap style accordion using CSS and JavaScript?CSSJavaScript Number MethodsJavaScriptThe substr() method in JavaScript and how it’s different from substring()JavaScriptHow to apply style only to first child and/or only to children other than the first child?CSSGeneral concepts in DrupalDrupal3 Types of Arrays in PHPPHPSelf-Driving and Intelligent NetworksMiscHow to disable right click and drag and drop of images using jQuery?jQueryAmpersand (Parent Selector) in SCSS (Sass)SCSS