How to loop an object in React

Question

New to React and trying to loop Object attributes but React complains about Objects not being valid React children  can someone please give me some advice on how to resolve this problem  I ve added createFragment but not completely sure where this needs to go or what approach I should take   JS  var tifs    1   Joe   2   Jane    var tifOptions   Object keys tifs  forEach function key        return  lt option value  key  gt  tifs key   lt  option gt        Render function  render             const model   this props model           let tifOptions                if model get  tifs                  tifOptions   Object keys this props model get  tifs    forEach function key                    return  lt option value  key  gt  this props model get  tifs   key   lt  option gt                                     return                lt div class  cellClasses  gt                        lt div class  grid  col-5 text--center grid  col--bleed  gt                           lt h5 class  flush text--uppercase  gt TIF lt  h5 gt                           lt select id  tif  name  tif  onChange  this handleChange  gt                               tifOptions                           lt  select gt                       lt  div gt                lt  div gt                     Error in console  If you meant to render a collection of children  use an array instead or wrap the object using createFragment object

User · Answer

You can use it in a more compact way as   var tifs    1   Joe   2   Jane         return       lt select id  tif  name  tif  onChange  this handleChange  gt            Object entries tifs  map  t k    gt   lt option key  k  value  t 0   gt  t 1   lt  option gt                   lt  select gt      And another slightly different flavour    Object entries tifs  map   key value  i    gt   lt option key  i  value  key  gt  value  lt  option gt

User · Answer

You can use map function  Object keys tifs  map key   gt         lt option value  key  gt  tifs key   lt  option gt

User · Answer

const tifOptions        for  const  key  value  of Object entries tifs         tifOptions push  lt option value  key  key  key  gt  value  lt  option gt       return       lt select id  tif  name  tif  onChange  this handleChange  gt            tifOptions                 lt  select gt

User · Answer

I highly suggest you to use an array instead of an object if you re doing react itteration  this is a syntax I use it ofen   const rooms   this state array map  e  i    gt   lt div key  i  gt  e  lt  div gt      To use the element  just place  rooms  in your jsx   Where e elements of the arrays and i index of the element  Read more here  If your looking for itteration  this is the way to do it

User · Answer

The problem is the way you re using forEach    as it will always return undefined  You re probably looking for the map   method  which returns a new array   var tifOptions   Object keys tifs  map function key        return  lt option value  key  gt  tifs key   lt  option gt        If you still want to use forEach    you d have to do something like this   var tifOptions        Object keys tifs  forEach function key        tifOptions push  lt option value  key  gt  tifs key   lt  option gt          Update   If you re writing ES6  you can accomplish the same thing a bit neater using an arrow function   const tifOptions   Object keys tifs  map key   gt        lt option value  key  gt  tifs key   lt  option gt      Here s a fiddle showing all options mentioned above  https   jsfiddle net fs7sagep

User · Answer

you could also just have a return div like the one below and use the built in template literals of Javascript    const tifs    1   Joe   2   Jane     return            lt div gt               Object keys tifOptions  map  key   gt                    lt p gt  paragraphs    key     lt  p gt                           lt  div gt

[javascript] How to loop an object in React?

Examples related to javascript

Examples related to reactjs