Rendering React Components from Array of Objects

Question

I have some data called stations which is an array containing objects   stations        call  station one  frequency  000       call  station two  frequency  001       I d like to render a ui component for each array position  So far I can write   var stationsArr       for  var i   0  i  lt  this data stations length  i           stationsArr push            lt div className  station  gt                this data            lt  div gt              And then render  render     return       stationsArr         The problem is I m getting all of the data printing out  I instead want to just show a key like  this data call  but that prints nothing   How can I loop through this data and return a new UI element for each position of the array

User · Answer

this data presumably contains all the data  so you would need to do something like this   var stations       var stationData   this data stations   for  var i   0  i  lt  stationData length  i          stations push           lt div key  stationData i  call  className  station  gt              Call   stationData i  call   Freq   stationData i  frequency           lt  div gt           render       return        lt div className  stations  gt  stations  lt  div gt          Or you can use map and arrow functions if you re using ES6   const stations   this data stations map station   gt       lt div key  station call  className  station  gt        Call   station call   Freq   station frequency       lt  div gt

User · Answer

This is quite likely the simplest way to achieve what you are looking for  In order to use this map function in this instance  we will have to pass a currentValue  always-required  parameter  as well an index  optional  parameter  In the below example  station is our currentValue  and x is our index  station represents the current value of the object within the array as it is iterated over  x automatically increments  increasing by one each time a new object is mapped  render          return            lt div gt               stations map  station  x    gt                     lt div key  x  gt   station   lt  div gt                           lt  div gt            What Thomas Valadez had answered  while it had provided the best simplest method to render a component from an array of objects  it had failed to properly address the way in which you would assign a key during this process

User · Answer

You can map the list of stations to ReactElements   With React    16  it is possible to return multiple elements from the same component without needing an extra html element wrapper  Since 16 2  there is a new syntax  lt   to create fragments  If this does not work or is not supported by your IDE  you can use  lt React Fragment gt  instead  Between 16 0 and 16 2  you can use a very simple polyfill for fragments   Try the following     Modern syntax  gt   React 16 2 0 const Test     stations     gt       lt  gt       stations map station   gt           lt div className  station  key  station call  gt  station call  lt  div gt             lt   gt          Modern syntax  lt  React 16 2 0    You need to wrap in an extra element like div here  const Test     stations     gt       lt div gt       stations map station   gt           lt div className  station  key  station call  gt  station call  lt  div gt             lt  div gt          old syntax var Test   React createClass       render  function             var stationComponents   this props stations map function station                return  lt div className  station  key  station call  gt  station call  lt  div gt                       return  lt div gt  stationComponents  lt  div gt              var stations        call  station one  frequency  000       call  station two  frequency  001        ReactDOM render     lt div gt       lt Test stations  stations    gt     lt  div gt     document getElementById  container        Don t forget the key attribute   https   jsfiddle net 69z2wepo 14377

User · Answer

There are couple of way which can be used   const stations        call  station one  frequency  000       call  station two  frequency  001      const callList   stations map   call     gt  call    Solution 1    lt p gt  callList join        lt  p gt    Solution 2   lt ol gt          callList  amp  amp  callList map item   gt   lt li gt  item  lt  li gt      lt  ol gt      Of course there are other ways also available

User · Answer

I have an answer that might be a bit less confusing for newbies like myself  You can just use map within the components render method   render         return           lt div gt              stations map station   gt   lt div key  station  gt   station   lt  div gt             lt  div gt

[javascript] Rendering React Components from Array of Objects

Examples related to javascript

Examples related to reactjs