How to render an array of objects in React

Question

could you please tell me how to render a list in react js  I do like this https   plnkr co edit X9Ov5roJtTSk9YhqYUdp p preview class First extends React Component     constructor  props       super props           render          const data     quot name quot   quot test1 quot     quot name quot   quot test2 quot         const listItems   data map  d    gt   lt li key  d name  gt  d name  lt  li gt            return          lt div gt        hello        lt  div gt

User · Answer

https   facebook github io react docs jsx-in-depth html javascript-expressions     You can pass any JavaScript expression as children  by enclosing it within     For example  these expressions are equivalent    lt MyComponent gt foo lt  MyComponent gt    lt MyComponent gt   foo   lt  MyComponent gt        This is often useful for rendering a list of JSX expressions of arbitrary length  For example  this renders an HTML list   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               x000D   x000D  class First extends React Component   x000D    constructor props    x000D      super props   x000D      this state     x000D        data    name   bob     name   chris     x000D         x000D      x000D     x000D    render     x000D      return   x000D         lt ul gt  x000D           this state data map d   gt   lt li key  d name  gt  d name  lt  li gt    x000D         lt  ul gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  x000D     lt First   gt   x000D    document getElementById  root   x000D     x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Shubham s answer explains very well  This answer is addition to it as per to avoid some pitfalls and refactoring to a more readable syntax   Pitfall   There is common misconception in rendering array of objects especially if there is an update or delete action performed on data  Use case would be like deleting an item from table row  Sometimes when row which is expected to be deleted  does not get deleted and instead other row gets deleted   To avoid this  use key prop in  root element which is looped over in JSX tree of  map    Also adding React s Fragment will avoid adding another element in between of ul and li when rendered via calling method   state         userData              id   1   name   Joe   user type   Developer               id   2   name   Hill   user type   Designer              deleteUser   id   gt           delete operation to remove item     renderItems        gt        const data   this state userData       const mapRows   data map  item  index    gt             lt Fragment key  item id  gt               lt li gt                      Passing unique value to  key  prop  eases process for virtual DOM to remove specific element and update HTML tree                       lt span gt Name    item name  lt  span gt                   lt span gt User Type   item user type  lt  span gt                   lt button onClick       gt  this deleteUser item id   gt                      Delete User                  lt  button gt               lt  li gt           lt  Fragment gt              return mapRows      render         return  lt ul gt  this renderItems    lt  ul gt       Important   Decision to use which value should we pass to key prop also matters as common way is to use index parameter provided by  map      TLDR  But there s a drawback to it and avoid it as much as possible and use any unique id from data which is being iterated such as item id  There s a good article on this - https   medium com  robinpokorny index-as-a-key-is-an-anti-pattern-e0349aece318

User · Answer

Try this   x000D   x000D  class First extends React Component     constructor  props       super props           render          const data     name   test1     name   test2         const listItems   data map  d    gt   lt li key  d name  gt  d name  lt  li gt            return          lt div gt         listItems         lt  div gt                x000D   x000D   x000D

User · Answer

import React from  react    class RentalHome extends React Component      constructor            super            this state                 rentals                     id  1                  title   quot Nice Shahghouse Biryani quot                   city   quot Hyderabad quot                   category   quot condo quot                   image   quot http   via placeholder com 350x250 quot                   numOfRooms  4                  shared  true                  description   quot Very nice apartment in center of the city  quot                   dailyPrice  43                                                   id  2                  title   quot Modern apartment in center quot                   city   quot Bangalore quot                   category   quot apartment quot                   image   quot http   via placeholder com 350x250 quot                   numOfRooms  1                  shared  false                  description   quot Very nice apartment in center of the city  quot                   dailyPrice  11                                                   id  3                  title   quot Old house in nature quot                   city   quot Patna quot                   category   quot house quot                   image   quot http   via placeholder com 350x250 quot                   numOfRooms  5                  shared  true                  description   quot Very nice apartment in center of the city  quot                   dailyPrice  23                                      render            const  rentals    this state          return               lt div className  quot card-list quot  gt                   lt div className  quot container quot  gt                       lt h1 className  quot page-title quot  gt Your Home All Around the World lt  h1 gt                       lt div className  quot row quot  gt                                                        rentals map  rental   gt                                   return                                       lt div key  rental  id  className  quot col-md-3 quot  gt                                           lt div className  quot card bwm-card quot  gt                                           lt img                                          className  quot card-img-top quot                                           src  rental image                                          alt  rental title    gt                                           lt div className  quot card-body quot  gt                                           lt h6 className  quot card-subtitle mb-0 text-muted quot  gt                                               rental shared   rental category   rental city                                           lt  h6 gt                                           lt h5 className  quot card-title big-font quot  gt                                               rental title                                           lt  h5 gt                                           lt p className  quot card-text quot  gt                                                rental dailyPrice  per Night  amp  183  Free Cancelation                                          lt  p gt                                           lt  div gt                                           lt  div gt                                       lt  div gt                                                                                                                                           lt  div gt                   lt  div gt               lt  div gt                     export default RentalHome

User · Answer

You can do it in two ways   First   render         const data     name   test1     name   test2         const listItems   data map  d    gt   lt li key  d name  gt  d name  lt  li gt         return          lt div gt         listItems          lt  div gt               Second  Directly write the map function in the return  render         const data     name   test1     name   test2         return          lt div gt         data map function d  idx            return   lt li key  idx  gt  d name  lt  li gt                     lt  div gt

[javascript] How to render an array of objects in React?

Examples related to javascript

Examples related to reactjs

Examples related to react-router