Loop inside React JSX

Question

I m trying to do something like the following in React JSX  where ObjectRow is a separate component    lt tbody gt      for  var i 0  i  lt  numrows  i               lt ObjectRow  gt          lt  tbody gt   I realize and understand why this isn t valid JSX  since JSX maps to function calls  However  coming from template land and being new to JSX  I am unsure how I would achieve the above  adding a component multiple times

User · Answer

There are several answers pointing to using the map statement. Here is a complete example using an iterator within the FeatureList component to list Feature components based on a JSON data structure called features.

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
);

You can view the complete FeatureList code on GitHub. The features fixture is listed here.

User · Answer

Maybe the standard of today maximum developer  use a structure like this   let data             id  1      name   quot name1 quot               id  2      name   quot name2 quot               id  3      name   quot name3 quot               id  100      name   quot another name quot          export const Row   data   gt      return        lt tr key  data id  gt         lt td gt  data id  lt  td gt         lt td gt  data name  lt  td gt       lt  tr gt           function App       return        lt table gt         lt thead gt           lt tr gt             lt th gt Id lt  th gt             lt th gt Name lt  th gt           lt  tr gt         lt  thead gt         lt tbody gt  data map item   gt  Row item    lt  tbody gt       lt  table gt          In the JSX  write your JavaScript action inside HTML or any code here   data map item   gt  Row item     use single curly braces and inside a map function  Get to know more about map  And also see the following output here

User · Answer

I have seen one person previous answer use  concat   in an array  but not like this    I have used concat to add to a string and then just render the JSX content on the element via the jQuery selector  let list    quot  lt div gt  lt ul gt  quot    for  let i 0  i lt myArray length  i          list   list concat   lt li gt   myArray i  valueYouWant  lt  li gt        list   list concat  quot  lt  ul gt  lt  div gt        quot  myItem quot   html list

User · Answer

I use it like   lt tbody gt      numrows          numrows map obj   gt    return  lt ObjectRow   gt              null      lt  tbody gt

User · Answer

Array from is the best way  If you want to create an array of JSX with some length  function App       return        lt tbody gt         Array from   length  10        key    gt             lt ObjectRow       key      gt                 lt  tbody gt          The above example is for when you do not have an array  so if you have an array you should map it in JSX like this  function App       return        lt tbody gt         list map  item  key    gt             lt ObjectRow       key      gt                 lt  tbody gt

User · Answer

const numrows    1  2  3  4  5    cosnt renderRows        gt        return numros map  itm index    gt   lt td key  index  gt  itm  lt  td gt      return  lt table gt                        lt tr gt           renderRows         lt  tr gt   lt  table gt

User · Answer

For printing an array value if you don t have the key value par  then use the below code -  lt div gt       my arr map item   gt   lt div gt  item   lt  div gt                          lt  div gt

User · Answer

function PriceList   self          let p   10000      let rows           for let i 0  i lt p  i i 50            let r   i   50          rows push  lt Dropdown Item key  i  onClick       gt  self setState   searchPrice     i -  r       gt  i - r   amp  8378  lt  Dropdown Item gt              return rows      lt PriceList self  this    gt

User · Answer

you can of course solve with a  map as suggested by the other answer  If you already use babel  you could think about using jsx-control-statements  They require a little of setting  but I think it s worth in terms of readability  especially for non-react developer   If you use a linter  there s also eslint-plugin-jsx-control-statements

User · Answer

Simple way You can put numrows in state and use map   instead of a for loop   this state numrows map  numrows   index    gt          return            lt ObjectRow           key  index            gt

User · Answer

Here is a sample from React doc JavaScript Expressions as Children  function Item props      return  lt li gt  props message  lt  li gt      function TodoList       const todos     finish doc    submit pr    nag dan to review      return        lt ul gt         todos map  message    gt   lt Item key  message  message  message    gt         lt  ul gt           as your case  I suggest writing like this   function render       return        lt tbody gt         numrows map  roe  index    gt   lt ObjectRow key  index    gt         lt  tbody gt           Please notice the Key is very important  because React use Key to differ data in array

User · Answer

You ll want to add elements to an array and render the array of elements  This can help reduce the time required to re-render the component   Here s some rough code that might help   MyClass extends Component       constructor             super props          this state     elements                 render             return   lt tbody gt  this state elements  lt tbody gt             add                           The line below is a cheap way of adding to an array in the state             1  Add  lt tr gt  to this state elements            2  Trigger a lifecycle update                      this setState               elements  this state elements concat   lt tr key  elements length  gt  lt td gt Element lt  td gt  lt  tr gt

User · Answer

Since you are writing Javascript syntax inside JSX code  you need to wrap your Javascript in curly braces   row        gt       var rows          for  let i   0  i lt numrows  i             rows push  lt ObjectRow  gt            return rows     lt tbody gt   this row       lt  tbody gt

User · Answer

You might want to checkout React Templates  which does let you use JSX-style templates in React  with a few directives  such as rt-repeat   Your example  if you used react-templates  would be   lt tbody gt        lt ObjectRow rt-repeat  quot obj in objects quot   gt   lt  tbody gt

User · Answer

Use the map function  It will help you   lt tbody gt       objects map  object  i    gt    lt ObjectRow obj  object  key  i    gt      lt  tbody gt

User · Answer

return        lt table gt          lt tbody gt                          numrows map  item  index    gt                   lt ObjectRow data  item  key  index  gt                                     lt  tbody gt       lt  table gt

User · Answer

Using map in React are best practices for iterating over an array  To prevent some errors with ES6  the syntax map is used like this in React   lt tbody gt       items map  item  index    gt   lt ObjectRow key  index  name  item name    gt     lt  tbody gt   Here you call a Component   lt ObjectRow  gt   so you don t need to put parenthesis after the arrow  But you can be make this too   items map  item  index    gt         lt ObjectRow key  index  name  item name    gt       Or   items map  item  index    gt           Here you can log  item      return            lt ObjectRow key  index  name  item name    gt             I say that because if you put a bracket  quot    quot  after the arrow React will not throw an error and will display a whitelist

User · Answer

Below are possible solutions that you can do in React in terms of iterating array of objects or plain array const rows       const numrows      quot id quot    01   quot name quot     quot abc quot     numrows map  data  i    gt        rows push  lt ObjectRow key  data id  name  data name   gt          lt tbody gt        rows    lt  tbody gt   Or const rows       const numrows    1 2 3 4 5   for let i 1  i  lt   numrows length  i         rows push  lt ObjectRow key  numrows i     gt         lt tbody gt        rows    lt  tbody gt   An even more better approach I became familiar with recent days for iterating an array of objects is  map directly in the render with return or without return   map with return  const numrows      quot id quot    01   quot name quot     quot abc quot       lt tbody gt        numrows map data  gt             return  lt ObjectRow key  data id  name  data name   gt            lt  tbody gt    map without return  const numrows      quot id quot    01   quot name quot     quot abc quot       lt tbody gt        numrows map data  gt              lt ObjectRow key  data id  name  data name   gt            lt  tbody gt

User · Answer

Your JSX code will compile into pure JavaScript code  any tags will be replaced by ReactElement objects  In JavaScript  you cannot call a function multiple times to collect their returned variables   It is illegal  the only way is to use an array to store the function returned variables   Or you can use Array prototype map which is available since JavaScript ES5 to handle this situation   Maybe we can write other compiler to recreate a new JSX syntax to implement a repeat function just like Angular s ng-repeat

User · Answer

This can be done in multple ways   As suggested above  before return store all elements in the array  Loop inside return Method 1  let container          let arr    1 2 3    can be anything array  object       arr forEach  val index   gt         container push  lt div key  index  gt                       val                       lt  div gt                          1  All loop generated elements require a key            2  only one parent element can be placed in Array           e g  container push  lt div key  index  gt                                      val                                lt  div gt                                 lt div gt                                this will throw error                                lt  div gt                                                             return          lt div gt            lt div gt any things goes here lt  div gt            lt div gt  container  lt  div gt         lt  div gt         Method 2    return        lt div gt        lt div gt any things goes here lt  div gt        lt div gt                gt             let container                let arr    1 2 3    can be anything array  object            arr forEach  val index   gt               container push  lt div key  index  gt                             val                             lt  div gt                                                    return container                            lt  div gt     lt  div gt

User · Answer

You can only write a JavaScript expression in a JSX element  so a for loop cannot work  You can convert the element into an array first and use the map function to render it   lt tbody gt           new Array numrows   map  e    gt              lt ObjectRow  gt           lt  tbody gt

User · Answer

I am not sure if this will work for your situation  but often map is a good answer  If this was your code with the for loop   lt tbody gt      for  var i 0  i  lt  objects length  i               lt ObjectRow obj  objects i   key  i  gt         lt  tbody gt   You could write it like this with map   lt tbody gt       objects map function object  i           return  lt ObjectRow obj  object  key  i    gt            lt  tbody gt   ES6 syntax   lt tbody gt       objects map  object  i    gt   lt ObjectRow obj  object  key  i    gt     lt  tbody gt

User · Answer

if numrows is a array  and it s very simple    lt tbody gt      numrows map item   gt   lt ObjectRow   gt     lt  tbody gt    Array data type in React is very better  array can back new array  and support filter  reduce etc

User · Answer

A loop inside JSX is very simple  Try this  return this state data map  item index    gt   lt ComponentName key  index  data  item   gt

User · Answer

When I want to add a certain number of components  I use a helper function  Define a function that returns JSX  const myExample        gt        let myArray          for let i   0  i lt 5 i              myArray push  lt MyComponent  gt             return myArray          in JSX   lt tbody gt       myExample     lt  tbody gt

User · Answer

Well  here you go         1  2  3  4  5  6  map  value  index    gt            return  lt div key  index  gt  value  lt  div gt            All you have to do is just map your array and return whatever you want to render  And please don t forget to use key in the returned element

User · Answer

The problem is you don t return any JSX element  There are another solutions for such cases  but I will provide the simplest one   quot use the map function quot    lt tbody gt      numrows map item   gt   lt ObjectRow key  item uniqueField    gt      lt  tbody gt   It s so simple and beautiful  isn t it

User · Answer

If you opt to convert this inside return    of render method  easiest option would be using map    method  Map your array into JSX syntax using map   function  as shown below  ES6 syntax is used      Inside parent component    lt tbody gt       objectArray map object   gt   lt ObjectRow key  object id  object  object value  gt      lt  tbody gt    Please note the key attribute added to your child component  If you didn t provide a key attribute  you can see the following warning on your console      Warning  Each child in an array or iterator should have   a unique  key  prop    Note  One common mistake people do is using index as key when iterating  using index of the element as a key is an anti-pattern and you can read more about it here  In short  if it s NOT a static list never use index as key     Now at the ObjectRow component  you can access the object from its properties   Inside ObjectRow component  const   object     this props  or   const object   this props object  This should fetch you the object you passed from parent component to the variable object in ObjectRow component  Now you can spit out the values in that object according to your purpose     References     map   method in Javascript  ECMA Script 6 or ES6

User · Answer

An ES2015   Babel possibility is using a generator function to create an array of JSX   function  jsxLoop times  callback        for var i   0  i  lt  times    i          yield callback i            lt tbody gt           jsxLoop numrows  i   gt           lt ObjectRow key  i   gt           lt  tbody gt

User · Answer

You can try the new for of loop  const apple         color   red       size   medium       weight  12      sugar  10   for  const prop of apple entries         console log prop      Here s a few examples

User · Answer

lt tbody gt     numrows map  row index    gt          return  lt ObjectRow key  index   gt        lt  tbody gt

User · Answer

It s funny how people give  quot creative quot  answers using a newer syntax or uncommon ways to create an array  In my experience working with JSX  I have seen these tricks only used by inexperienced React programmers  The simpler the solution - the better it is for future maintainers  And since React is a web framework  usually this type of  table  data comes from the API  Therefore  the simplest and most practical way would be  const tableRows         id  1  title   row1         id  2  title   row2         id  3  title   row3         Data from the API  domain-driven names would be better of course       return      tableRows map row   gt   lt ObjectRow key  row id      row    gt

User · Answer

Using Array map function is a very common way to loop through an Array of elements and create components according to them in React  this is a great way to do a loop which is a pretty efficient and tidy way to do your loops in JSX  It s not the only way to do it  but the preferred way   Also  don t forget having a unique Key for each iteration as required  Map function creates a unique index from 0 but it s not recommended using the produced index but if your value is unique or if there is a unique key  you can use them   lt tbody gt     numrows map x  gt   lt ObjectRow key  x id    gt     lt  tbody gt   Also  few lines from MDN if you not familiar with map function on Array   map calls a provided callback function once for each element in an array  in order  and constructs a new array from the results  callback is invoked only for indexes of the array which have assigned values  including undefined  It is not called for missing elements of the array  that is  indexes that have never been set  which have been deleted or which have never been assigned a value   callback is invoked with three arguments  the value of the element  the index of the element  and the Array object being traversed  If a thisArg parameter is provided to the map  it will be used as callback s this value  Otherwise  the value undefined will be used as its this value  This value ultimately observable by the callback is determined according to the usual rules for determining the this seen by a function  map does not mutate the array on which it is called  although callback  if invoked  may do so

User · Answer

If you are used to Angular and want a more React-like approach  Try using this simple component with auto hashing and optional trackBy similar to Angular s  Usage   lt For items  items  gt       item   gt   lt div gt item lt  div gt    lt  For gt   Custom key trackBy   lt For items  items  trackBy   name   gt       item   gt   lt div gt item lt  div gt    lt  For gt   Definition  export default class For lt T gt  extends Component lt   items  T    trackBy   keyof T  children   item  T    gt  React ReactElement       gt        render             return                lt Fragment gt                   this props items map  item  any  index    gt   lt Fragment key  this props trackBy    item id    index  gt  this props children item   lt  Fragment gt                 lt  Fragment gt                      React Dev Tools

User · Answer

Unless you declare a function and enclose it with parameters  it is not possible  In a JSXExpression you can only write expressions and cannot write statements like a for    declare variables or classes  or a if   statement  That s why function CallExpressions are so in the mood today  My advice  get used to them  This is what I would do  const names     foo    bar    seba   const people    lt ul gt  names map name   gt   lt li gt  name  lt  li gt    lt  ul gt   Filtering  const names     foo   undefined   seba   const people    lt ul gt  names filter person   gt    person  map name   gt   lt li gt  name  lt  li gt    lt  ul gt   if    var names   getNames   const people    names  amp  amp  names length  amp  amp      lt ul gt  names map name   gt   lt li gt  name  lt  li gt    lt  ul gt     if - else  var names   getNames   const people    names  amp  amp  names length      lt ul gt  names map name   gt   lt li gt  name  lt  li gt    lt  ul gt     lt p gt no results lt  p gt

User · Answer

jacefarm If I understand right you can use this code    lt tbody gt        new Array numrows  fill  lt ObjectRow  gt       lt  tbody gt    Either you can use this code    lt tbody gt       new Array numrows  fill     map  item  ind    gt   lt ObjectRow key  ind   gt       lt  tbody gt    And this    lt tbody gt      new Array numrows  fill ObjectRow  map  Item  ind    gt   lt Item key  ind   gt    lt  tbody gt

User · Answer

To provide a more straightforward solution in case you want to use a specific row count which is stored as Integer-value  With the help of typedArrays we could achieve the desired solution in the following manner     Let s create a typedArray with length of  numrows -value const typedArray   new Int8Array numrows      typedArray length is now 2 const rows          Prepare rows-array for  let arrKey in typedArray       Iterate keys of typedArray   rows push  lt ObjectRow key  arrKey    gt       Push to an rows-array      Return rows return  lt tbody gt  rows  lt  tbody gt

User · Answer

You can do something like   let foo    1 undefined 3    foo map e   gt    e    lt Object   gt    null

User · Answer

You can also extract outside the return block   render  function         var rows           for  var i   0  i  lt  numrows  i              rows push  lt ObjectRow key  i   gt                return   lt tbody gt  rows  lt  tbody gt

User · Answer

Use    around JavaScript code within a JSX block to get it to properly perform whatever JavaScript action you are trying to do   lt tr gt     lt td gt       data map  item  index    gt           item             lt  td gt   lt  tr gt   This is kind of vague  but you can swap out data for any array   This will give you a table row and table item for each item  If you have more than just one thing in each node of the array  you will want to target that specifically by doing something like this   lt td gt  item someProperty  lt  td gt   In which case  you will want to surround it with a different td and arrange the previous example differently

User · Answer

You can also use a self-invoking function        return  lt tbody gt                    gt                  let row                    for  var i   0  i  lt  numrows  i                        row push  lt ObjectRow key  i    gt                                 return row                            lt  tbody gt

User · Answer

There are multiple ways to go about doing this  JSX eventually gets compiled to JavaScript  so as long as you re writing valid JavaScript  you ll be good   My answer aims to consolidate all the wonderful ways already presented here   If you do not have an array of object  simply the number of rows   within the return block  creating an Array and using Array prototype map   render       return        lt tbody gt         Array numrows  fill null  map  value  index    gt             lt ObjectRow key  index  gt                 lt  tbody gt           outside the return block  simply use a normal JavaScript for-loop   render       let rows         for  let i   0  i  lt  numrows  i          rows push  lt ObjectRow key  i   gt           return        lt tbody gt  rows  lt  tbody gt           immediately invoked function expression   render       return        lt tbody gt              gt            let rows               for  let i   0  i  lt  numrows  i                rows push  lt ObjectRow key  i   gt                      return rows                lt  tbody gt           If you have an array of objects  within the return block   map   each object to a  lt ObjectRow gt  component   render       return        lt tbody gt         objectRows map  row  index    gt             lt ObjectRow key  index  data  row    gt                 lt  tbody gt           outside the return block  simply use a normal JavaScript for-loop   render       let rows         for  let i   0  i  lt  objectRows length  i          rows push  lt ObjectRow key  i  data  objectRows i     gt           return        lt tbody gt  rows  lt  tbody gt           immediately invoked function expression   render       return        lt tbody gt               gt            const rows               for  let i   0  i  lt  objectRows length  i                rows push  lt ObjectRow key  i  data  objectRows i     gt                      return rows                   lt  tbody gt

User · Answer

If you need JavaScript code inside your JSX  you add     and then write your JavaScript code inside these brackets  It is just that simple  And the same way you can loop inside JSX react  Say   lt tbody gt        your piece of code in JavaScript     lt  tbody gt   Example   lt tbody gt        items map  item  index    gt            console log item         Print item         return  lt span gt  index  lt  span gt            Looping using map    lt  tbody gt

User · Answer

I tend to favor an approach where programming logic happens outside the return value of render   This helps keep what is actually rendered easy to grok   So I d probably do something like   import   from  lodash         const TableBody      objects      gt      const objectRows   objects map obj   gt   lt ObjectRow object  obj    gt             return  lt tbody gt  objectRows  lt  tbody gt        Admittedly this is such a small amount of code that inlining it might work fine

User · Answer

Even this piece of code does the same job    lt tbody gt      array map i   gt          lt ObjectRow key  i id  name  i name    gt         lt  tbody gt

User · Answer

Or you can also prepare an array of objects and map it to a function to have the desired output  I prefer this  because it helps me to maintain the good practice of coding with no logic inside the return of render    render     const mapItem       for let i  0 i lt item length i       mapItem push i   const singleItem   gt   item  index        item the single item in the array      the index of the item in the array     can implement any logic here  return      lt ObjectRow  gt         return      lt tbody gt  mapItem map singleItem   lt  tbody gt

User · Answer

Here s a simple solution to it  var Object rows       for  var i   0  i  lt  numrows  i        Object rows push  lt ObjectRow   gt       lt tbody gt  Object rows  lt  tbody gt     No mapping and complex code required  You just need to push the rows to the array and return the values to render it

User · Answer

You can create a new component like below  Pass key and data to your ObjectRow component like this  export const ObjectRow     key data     gt        return          lt div gt                       lt  div gt            Create a new component ObjectRowList to act like a container for your data  export const ObjectRowList    objectRows    gt        return          lt tbody gt           objectRows map  row  index    gt               lt ObjectRow key  index  data  row    gt                     lt  tbody gt

User · Answer

React elements are simple JS  so you can follow the rule of javascript  So you can use a for loop in javascript like this -   lt tbody gt      for  var i 0  i  lt  numrows  i               lt ObjectRow  gt          lt  tbody gt    But the valid and best way is to use the  map function  Shown below -   lt tbody gt       listObject map function listObject  i           return  lt ObjectRow key  i    gt            lt  tbody gt    Here  one thing is necessary  to define the key  Otherwise it will throw a warning like this -     warning js 36 Warning  Each child in an array or iterator should have   a unique  key  prop  Check the render method of ComponentName  See    link  for more information

User · Answer

Inside your render or any function and before return  you can use a variable to store JSX elements  Just like this - const tbodyContent       for  let i 0  i  lt  numrows  i          tbodyContent push  lt ObjectRow  gt       Use it inside your tbody like this   lt tbody gt                tbodyContent        lt  tbody gt   But I ll prefer map   over this

User · Answer

To loop for a number of times and return  you can achieve it with the help of from and map   lt tbody gt          Array from Array i   map      gt   lt ObjectRow   gt        lt  tbody gt   where i   number of times  If you want to assign unique key IDs into the rendered components  you can use React Children toArray as proposed in the React documentation React Children toArray Returns the children opaque data structure as a flat array with keys assigned to each child  Useful if you want to manipulate collections of children in your render methods  especially if you want to reorder or slice this props children before passing it down   Note  React Children toArray   changes keys to preserve the semantics of nested arrays when flattening lists of children  That is  toArray prefixes each key in the returned array so that each element   s key is scoped to the input array containing it    lt tbody gt          React Children toArray        Array from Array i   map      gt   lt ObjectRow   gt              lt  tbody gt

User · Answer

If you re already using lodash  the   times function is handy  import React    Component   from  quot react quot   import Select from  quot   Select quot   import   from  quot lodash quot    export default class App extends Component     render         return          lt div className  quot container quot  gt           lt ol gt               times 3   i    gt                 lt li key  i  gt                 lt Select onSelect  this onSelect  gt                   lt option value  quot 1 quot  gt bacon lt  option gt                   lt option value  quot 2 quot  gt cheez lt  option gt                 lt  Select gt               lt  li gt                         lt  ol gt         lt  div gt

User · Answer

You have to write in JSX   lt tbody gt                objects map  object  i    gt                 lt ObjectRow obj  object  key  i    gt                     lt  tbody gt

User · Answer

If numrows is an array  as the other answers  the best way is the map method  If it s not and you only access it from JSX  you can also use this ES6 method   lt tbody gt                  Array numrows  fill 0   map  value index   gt  lt ObjectRow key  index    gt          lt  tbody gt

User · Answer

You can use an IIFE if you really want to literally use a for loop inside JSX   lt tbody gt           function            const view             for  let i   0  i  lt  numrows  i              view push  lt ObjectRow key  i   gt                  return view                lt  tbody gt

User · Answer

There are multiple ways to loop inside JSX  Using a for loop function TableBodyForLoop props      const rows          Create an array to store list of tr    for  let i   0  i  lt  props people length  i          const person   props people i          Push the tr to array  the key is important     rows push         lt tr key  person id  gt           lt td gt  person id  lt  td gt           lt td gt  person name  lt  td gt         lt  tr gt                   Return the rows inside the tbody   return  lt tbody gt  rows  lt  tbody gt       Using the ES6 array map method function TableBody props      return        lt tbody gt         props people map person   gt             lt tr key  person id  gt             lt td gt  person id  lt  td gt             lt td gt  person name  lt  td gt           lt  tr gt                 lt  tbody gt             Full example  https   codesandbox io s cocky-meitner-yztif The following React Docs will be helpful  Lists and Keys Conditional Rendering

User · Answer

Simply use  map   to loop through your collection and return  lt ObjectRow gt  items with props from each iteration   Assuming objects is an array somewhere      lt tbody gt      objects map  obj  index    gt   lt ObjectRow obj   obj   key   index    gt       lt  tbody gt

User · Answer

Simply using map Array method with ES6 syntax    lt tbody gt     items map item   gt   lt ObjectRow key  item id  name  item name    gt      lt  tbody gt    Don t forget the key property

User · Answer

With time  the language is becoming more mature  and we often stumble upon common problems like this  The problem is to loop a Component  n  times       new Array n   map  item  index    gt   lt MyComponent key  index    gt     where  n -is the number of times you want to loop  item will be undefined and index will be as usual  Also  ESLint discourages using an array index as key  But you have the advantage of not requiring to initialize the array before and most importantly avoiding the for loop    To avoid the inconvenience of item as undefined you can use an    so that it will be ignored when linting and won t throw any linting error  such as      new Array n   map     index    gt   lt MyComponent key  index    gt

User · Answer

let us say we have an array of items in your state     name   item1   id  1    name   item2   id  2    name   item3   id  3     lt tbody gt       this state items map  item    gt             lt ObjectRow key  item id  name  item name    gt            lt  tbody gt

User · Answer

Having the JSX content in the map can be clunky syntax  Instead you can do this  const ObjectRow               gt   lt tr key    gt     lt  tr gt   const TableBody      objects      gt      return  lt tbody gt  objects map ObjectRow   lt  tbody gt      This is shorthand for   objects map object   gt  ObjectRow object    If ObjectRow is set up to take the same keys that are in the object  this will work great  Note - You may need to set the key prop when the ObjectRow is rendered  It can t be passed in through the function call   More notes - I ve run into a few places where this technique is a bad idea  For example  it doesn t go through the normal create component path and won t default prop values for example  so do beware  Still  it s handy to know about and is useful sometimes

User · Answer

If you don t already have an array to map   like  FakeRainBrigand s answer  and want to inline this so the source layout corresponds to the output closer than  SophieAlpert s answer   With ES2015  ES6  syntax  spread and arrow functions   http   plnkr co edit mfqFWODVy8dKQQOkIEGV p preview   lt tbody gt         Array 10   map  x  i    gt       lt ObjectRow key  i    gt        lt  tbody gt    Re  transpiling with Babel  its caveats page says that Array from is required for spread  but at present  v5 8 23  that does not seem to be the case when spreading an actual Array  I have a documentation issue open to clarify that  But use at your own risk or polyfill   Vanilla ES5  Array apply   lt tbody gt     Array apply 0  Array 10   map function  x  i        return  lt ObjectRow key  i    gt          lt  tbody gt    Inline IIFE  http   plnkr co edit 4kQjdTzd4w69g8Suu2hT p preview   lt tbody gt      function  rows  i  len        while    i  lt   len          rows push  lt ObjectRow key  i    gt             return rows           0  10    lt  tbody gt    Combination of techniques from other answers  Keep the source layout corresponding to the output  but make the inlined part more compact   render  function        var rows       i   0  len   10    while    i  lt   len  rows push i      return        lt tbody gt         rows map function  i            return  lt ObjectRow key  i  index  i    gt                  lt  tbody gt           With ES2015 syntax  amp  Array methods  With Array prototype fill you could do this as an alternative to using spread as illustrated above    lt tbody gt     Array 10  fill 1  map  el  i    gt       lt ObjectRow key  i    gt        lt  tbody gt     I think you could actually omit any argument to fill    but I m not 100  on that   Thanks to  FakeRainBrigand for correcting my mistake in an earlier version of the fill   solution  see revisions    key  In all cases the key attr alleviates a warning with the development build  but isn t accessible in the child  You can pass an extra attr if you want the index available in the child  See Lists and Keys for discussion

User · Answer

I ve found one more solution to follow the map render    lt tbody gt  this getcontent    lt  tbody gt   And a separate function  getcontent         const bodyarea   this state movies map movies   gt             lt tr key  movies  id  gt               lt td gt  movies title  lt  td gt               lt td gt  movies genre name  lt  td gt               lt td gt  movies numberInStock  lt  td gt               lt td gt  movies publishDate  lt  td gt               lt td gt                   lt button                     onClick  this deletMovie bind this  movies  id                       className  quot btn btn-danger quot                   gt                      Delete                  lt  button gt               lt  td gt           lt  tr gt              return bodyarea     This example solves many problems easily

User · Answer

render       const elements     one    two    three       const items         for  const  index  value  of elements entries          items push  lt li key  index  gt  value  lt  li gt          return        lt div gt         items       lt  div gt

User · Answer

I use this   gridItems   this state applications map app   gt             lt ApplicationItem key  app Id  app  app     gt       PS  never forget the key or you will have a lot of warnings

User · Answer

ES2015 Array from with the map function   key If you have nothing to  map   you can use Array from   with the map function to repeat elements   lt tbody gt     Array from   length  5     value  key    gt   lt ObjectRow key  key    gt     lt  tbody gt

User · Answer

There are many solutions posted out there in terms of iterating an array and generating JSX elements  All of them are good  but all of them used an index directly in a loop  We are recommended to use unique id from data as a key  but when we do not have a unique id from each object in the array we will use index as a key  but you are not recommended to use an index as a key directly  One more thing why we go for  map  but why not  foEach because  map returns a new array  There are different ways of doing  map these days  Below different versions of using  map illustrates in detail about how to use a unique key and how to use  map for looping JSX elements   map without return when returning single a JSX element and unique id from data as a key version  const  objects    this state    lt tbody gt       objects map object   gt   lt ObjectRow obj  object  key  object id    gt     lt  tbody gt    map without return when returning multiple JSX elements and unique id from data as a key version const  objects    this state    lt tbody gt       objects map object   gt             lt div key  object id  gt               lt ObjectRow obj  object    gt           lt  div gt           lt  tbody gt    map without return when returning a single JSX element and index as a key version  const  objects    this state    lt tbody gt       objects map  object  index    gt   lt ObjectRow obj  object  key   Key  index      gt     lt  tbody gt    map without return when returning multiple JSX elements and index as a key version  const  objects    this state    lt tbody gt       objects map  object  index    gt             lt div key   Key  index    gt               lt ObjectRow obj  object    gt           lt  div gt           lt  tbody gt    map with return when returning multiple JSX elements and index as a key version  const  objects    this state    lt tbody gt       objects map  object  index    gt            return                lt div key   Key  index    gt                   lt ObjectRow obj  object    gt               lt  div gt                     lt  tbody gt    map with return when returning multiple JSX elements and unique id from data as a key version  const  objects    this state    lt tbody gt       objects map object   gt            return                lt div key  object id  gt                   lt ObjectRow obj  object    gt               lt  div gt                     lt  tbody gt   The other way is render       const  objects    this state    const objectItems   objects map object   gt           return               lt div key  object id  gt                  lt ObjectRow obj  object    gt              lt  div gt                  return         lt div gt             lt tbody gt                 objectItems             lt  tbody gt         lt  div gt

User · Answer

I am not sure if this will work for your situation  but often  map  1  is a good answer   If this was your code with the for loop    lt tbody gt      for  var i 0  i  lt  objects length  i               lt ObjectRow obj  objects i   key  i  gt         lt  tbody gt    You could write it like this with the map function    lt tbody gt       objects map function object  i           return  lt ObjectRow obj  object  key  i    gt            lt  tbody gt    objects map is the best way to do a loop  and objects filter is the best way to filter the required data  The filtered data will form a new array  and objects some is the best way to check whether the array satisfies the given condition  it returns Boolean

User · Answer

Think of it like you re just calling JavaScript functions  You can t use a for loop where the arguments to a function call would go  return tbody      for  var i   0  i  lt  numrows  i              ObjectRow             See how the function tbody is being passed a for loop as an argument     leading to a syntax error  But you can make an array  and then pass that in as an argument  var rows       for  var i   0  i  lt  numrows  i          rows push ObjectRow       return tbody rows     You can basically use the same structure when working with JSX  var rows       for  var i   0  i  lt  numrows  i             note  we are adding a key prop here to allow react to uniquely identify each        element in this array  see  https   reactjs org docs lists-and-keys html     rows push  lt ObjectRow key  i    gt      return  lt tbody gt  rows  lt  tbody gt    Incidentally  my JavaScript example is almost exactly what that example of JSX transforms into  Play around with Babel REPL to get a feel for how JSX works

[javascript] Loop inside React JSX

Examples related to javascript

Examples related to reactjs

Examples related to jsx