Looping an Array In JSX – React JS

Spread the love

When you already have working experience on any of the tempting engines or framework which provide looping DOM functionality, you want it to be everywhere. As you already know, we have ng-repeat in Angular 1, *ngFor in Angular 2 etc, Likewise in React js which use JSX for templating, you can use the following method to Looping In JSX Array element.

 

Output:

Sahil

Jake

Jon

Thruster

Note: Looping In JSX might give you following error:

Error : Each child in an array or iterator should have a unique “key” prop.

You can clear above error by providing a unique key to top level element inside loop as following:

In above Code, we have assigned index value to key attribute to top html element. Doing above will solve your problem.

Happy coding in React, JSX …… 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *