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 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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
Casting in PostgreSQLPostgresColleague UI Basics: The Context AreaColleagueJavaScript Number MethodsJavaScriptHow to Make a Simple Module with a Form and Menu Link in Drupal 7.x?DrupalA few HTML coding standards from WordPressHTMLEffects in ReactReactMoving folders in WordPress using codeWordPressHAVING Clause in Postgres with Examples in All Aggregate FunctionsPostgresHow to make HTML form interactive and using CSS?CSSHow to convert an object from API to JSON array in Angular 9?AngularHow to create a Bootstrap style accordion using CSS and JavaScript?CSSABS and NEG functions in Envision BasicEnvision Basic