close

How to loop and render elements in React.js without an array of objects to map?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to loop and render elements in React.js without an array of objects to map? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to loop and render elements in React.js without an array of objects to map ?

  1. How to loop and render elements in React.js without an array of objects to map ?

    loop and render elements in React.js without an array of objects to map Array.from() takes an iterable object to convert to an array and an optional map function. You could create an object with a .length property as follows:

  2. loop and render elements in React.js without an array of objects to map

    loop and render elements in React.js without an array of objects to map Array.from() takes an iterable object to convert to an array and an optional map function. You could create an object with a .length property as follows:

Method 1

Array.from() takes an iterable object to convert to an array and an optional map function. You could create an object with a .length property as follows:

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);

Method 2


You can still use map if you can afford to create a makeshift array:

{
    new Array(this.props.level).fill(0).map((_, index) => (
        <span className='indent' key={index}></span>
    ))
}

This works because new Array(n).fill(x) creates an array of size n filled with x, which can then aid map.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment