How can I render repeating React elements

Question

I ve written some code to render repeating elements in ReactJS  but I hate how ugly it is   render  function      var titles   this props titles map function title        return  lt th gt  title  lt  th gt           var rows   this props rows map function row        var cells           for  var i in row          cells push  lt td gt  row i   lt  td gt              return  lt tr gt  cells  lt  tr gt           return        lt table className  MyClassName  gt         lt thead gt           lt tr gt  titles  lt  tr gt         lt  thead gt         lt tbody gt  rows  lt  tbody gt       lt  table gt            Is there a better way to achieve this    I would like to embed for loops within the template code  or some similar approach

User · Answer

To expand on Ross Allen s answer  here is a slightly cleaner variant using ES6 arrow syntax    this props titles map title   gt     lt th key  title  gt  title  lt  th gt       It has the advantage that the JSX part is isolated  no return or     making it easier to put a loop around it

User · Answer

You can put expressions inside braces  Notice in the compiled JavaScript why a for loop would never be possible inside JSX syntax  JSX amounts to function calls and sugared function arguments  Only expressions are allowed    Also  Remember to add key attributes to components rendered inside loops    JSX   ES2015   render       return        lt table className  MyClassName  gt         lt thead gt           lt tr gt             this props titles map title   gt               lt th key  title  gt  title  lt  th gt                        lt  tr gt         lt  thead gt         lt tbody gt           this props rows map  row  i    gt             lt tr key  i  gt               row map  col  j    gt                 lt td key  j  gt  col  lt  td gt                            lt  tr gt                    lt  tbody gt       lt  table gt            JavaScript   render  function       return       React DOM table  className   MyClassName           React DOM thead null           React DOM tr null             this props titles map function title                return React DOM th  key  title   title                                          React DOM tbody null           this props rows map function row  i              return               React DOM tr  key  i                  row map function col  j                    return React DOM td  key  j   col

User · Answer

In the spirit of functional programming  let s make our components a bit easier to work with by using abstractions      converts components into mappable functions var mappable   function component     return function x  i       return component  key  i   x             maps on 2-dimensional arrays var map2d   function m1  m2  xss     return xss map function xs  i  arr       return m1 xs map m2   i  arr            var td   mappable React DOM td   var tr   mappable React DOM tr   var th   mappable React DOM th     Now we can define our render like this   render  function      return        lt table gt         lt thead gt  this props titles map th   lt  thead gt         lt tbody gt  map2d tr  td  this props rows   lt  tbody gt       lt  table gt           jsbin    An alternative to our map2d would be a curried map function  but people tend to shy away from currying

User · Answer

This is  imo  the most elegant way to do it  with ES6   Instantiate you empty array with 7 indexes and map in one line   Array apply null  Array 7   map  i   gt   lt Somecomponent  gt      kudos to https   php quicoto com create-loop-inside-react-jsx

User · Answer

Since Array 3  will create an un-iterable array  it must be populated to allow the usage of the map Array method  A way to  quot convert quot  is to destruct it inside Array-brackets  which  quot forces quot  the Array to be filled with undefined values  same as Array N  fill undefined   lt table gt            Array 3   map     index    gt   lt tr key  index   gt      lt  table gt   Another way would be via Array fill     lt table gt        Array 3  fill  lt tr  gt      lt  table gt       Problem with above example is the lack of key prop  which is a must   Using an iterator s index as key is not recommended    Nested Nodes   x000D   x000D  const tableSize    3 4  const Table          lt table gt           lt tbody gt                Array tableSize 0    map  tr  trIdx    gt                lt tr key  trIdx  gt                       Array tableSize 1    map  a  tdIdx  arr    gt                      lt td key  trIdx   tdIdx  gt                     arr length   trIdx   tdIdx   1                     lt  td gt                                 lt  tr gt                      lt  tbody gt       lt  table gt      ReactDOM render Table  document querySelector  main    x000D  td  border 1px solid silver  padding 1em    x000D   lt script crossorigin src  https   unpkg com react 16 umd react development js  gt  lt  script gt   lt script crossorigin src  https   unpkg com react-dom 16 umd react-dom development js  gt  lt  script gt   lt main gt  lt  main gt  x000D   x000D   x000D

[javascript] How can I render repeating React elements?

Examples related to javascript

Examples related to reactjs