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

Question

I m trying to convert a jQuery component to React js and one of the things I m having difficulty with is rendering n number of elements based on a for loop     I understand this is not possible  or recommended and that where an array exists in the model it makes complete sense to use map   That s fine  but what about when you do not have an array   Instead you have numeric value which equates to a given number of elements to render  then what should you do   Here s my example  I want to prefix a element with an arbitrary number of span tags based on it s hierarchical level   So at level 3  I want 3 span tags before the text element     In javascript   for  var i   0  i  lt  level  i           el append   lt span class  indent  gt  lt  span gt        el append  Some text value      I can t seem to get this  or anything similar to work in a JSX React js component   Instead I had to do the following  first building a temp array to the correct length and then looping the array   React js  render  function       var tmp         for  var i   0  i  lt  this props level  i          tmp push i         var indents   tmp map function  i        return          lt span className  indent  gt  lt  span gt                  return                indents       Some text value                   Surely this can t be the best  or only way to achieve this    What am I missing

User · Accepted Answer

Updated  As of React   0 16  Render method does not necessarily have to return a single element  An array can also be returned   var indents       for  var i   0  i  lt  this props level  i        indents push  lt span className  indent  key  i  gt  lt  span gt      return indents    OR   return this props level map  item  index    gt         lt span className  indent  key  index  gt           index       lt  span gt        Docs here explaining about JSX children    OLD   You can use one loop instead   var indents       for  var i   0  i  lt  this props level  i        indents push  lt span className  indent  key  i  gt  lt  span gt      return       lt div gt       indents       Some text value      lt  div gt       You can also use  map and fancy es6  return       lt div gt       this props level map  item  index    gt            lt span className  indent  key  index    gt               Some text value      lt  div gt       Also  you have to wrap the return value in a container  I used div in the above example  As the docs say here     Currently  in a component s render  you can only return one node  if you have  say  a list of divs to return  you must wrap your components within a div  span or any other component

User · Answer

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    gt      lt span className  indent  key  index  gt  lt  span gt

User · Answer

Here is more functional example with some ES6 features    use strict    const React   require  react     function renderArticles articles        if  articles length  gt  0                  return articles map  article  index    gt                 lt Article key  index  article  article    gt                        else return        const Article     article     gt        return             lt article key  article id  gt               lt a href  article link  gt  article title  lt  a gt               lt p gt  article description  lt  p gt           lt  article gt             const Articles   React createClass       render             const articles   renderArticles this props articles            return                lt section gt                    articles                lt  section gt                        module exports   Articles

User · Answer

You can still use map if you can afford to create a makeshift array        new Array this props level  fill 0  map     index    gt             lt span className  indent  key  index  gt  lt  span gt            This works because new Array n  fill x  creates an array of size n filled with x  which can then aid map

User · Answer

I m using Object keys chars  map      to loop in render     chars    a true  b false       z false   render         return           lt div gt           chars  amp  amp  Object keys chars  map function char  idx                return  lt span key  idx  gt  char  lt  span gt             bind this             Some text value          lt  div gt

User · Answer

I think this is the easiest way to loop in react js   lt ul gt       yourarray map  item   gt  lt li gt  item  lt  li gt     lt  ul gt

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

Examples related to javascript

Examples related to jquery

Examples related to reactjs

Examples related to react-jsx