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 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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
WordPress: How to print ACF array field values?WordPressCSS Overflow Property with ExamplesCSSData Flows in ReactReactThe substr() method in JavaScript and how it’s different from substring()JavaScriptQuery to increment or decrement value in MySQL ignoring negative valuesSQL/MySQLCasting in PostgreSQLPostgresOpen Source Security Tools for Defense SecurityMiscellaneousWhat happens when we add Numbers and Strings in JavaScript?JavaScriptThe simple difference between var, let and const in JavascriptJavaScriptHow to get ACF values from custom post type?WordPressUnderstand Inheritance in PHP in this Basic Example (For Beginners)PHPPHP Login System using PDO Part 2: Login using Email or UsernamePHP