How to map an array of objects in React

Question

I have an array of objects   I would like to map this array of objects  I know how to map an array  but can t figure out how to map an array of objects   Here is what I have done so far     The array of objects I want to map     const theData                   name   Sam           email   somewhere gmail com                        name   Ash           email   something gmail com            My component     class ContactData extends Component       render               works for array         const renData   this props dataA map  data  idx    gt                return  lt p key  idx  gt  data  lt  p gt                         doesn t work for array of objects         const renObjData   this props data map function data  idx                return  lt p key  idx  gt  data  lt  p gt                       return                lt div gt                    works                  rennData                   lt p gt object lt  p gt                    doesn t work                  renObjData               lt  div gt                      ContactData PropTypes         data  PropTypes arrayOf          PropTypes obj            dataA  PropTypes array    ContactData defaultProps         data  theData      dataA  dataArray     What am I missing

User · Answer

I think you want to print the name of the person or both the name and email :

const renObjData = this.props.data.map(function(data, idx) {
    return <p key={idx}>{data.name}</p>;
});

or :

const renObjData = this.props.data.map(function(data, idx) {
   return ([
       <p key={idx}>{data.name}</p>,
       <p key={idx}>{data.email}</p>,
   ]);
});

User · Answer

you must put object in your JSX  It s easy way to do this just see my simple code here  const link            name   quot Cold Drink quot      link   quot  coldDrink quot              name   quot Hot Drink quot      link   quot  HotDrink quot          name   quot chease Cake quot   link   quot  CheaseCake quot       and you must map this array in your code with simple object see this code   const links    this props link    links map  item  i    gt      lt li key  i  gt      lt Link to  item link  gt  item name  lt  Link gt    lt  li gt        I hope this answer will be helpful for you

User · Answer

FurkanO has provided the right approach  Though to go for a more cleaner approach  es6 way  you can do something like this         name   Sam       email   somewhere gmail com             name   Ash       email   something gmail com       map     name  email      gt        return  lt p key  email  gt  name  -  email  lt  p gt       Cheers

User · Answer

try the following snippet  const renObjData   this props data map function data  idx        return  lt ul key  idx  gt    map data  val ind    gt            return   lt li gt  val  lt  li gt                lt  ul gt

User · Answer

What you need is to map your array of objects and remember that every item will be an object  so that you will use for instance dot notation to take the values of the object   In your component                   name   Sam           email   somewhere gmail com                        name   Ash           email   something gmail com          map  anObjectMapped  index    gt        return            lt p key     anObjectMapped name   anObjectMapped email    gt               anObjectMapped name  -  anObjectMapped email           lt  p gt              And remember when you put an array of jsx it has a different meaning and you can not just put object in your render method as you can put an array    Take a look at my answer at mapping an array to jsx

[arrays] How to map an array of objects in React

Examples related to arrays

Examples related to object

Examples related to dictionary

Examples related to reactjs

Examples related to components