How to render nested object elements map method [duplicate]

Question

here is the my json data, i want to use "name" in products.

list:[ { id: 1, suppliercard:{ iduser: 5, supplier:{ product:[{name: "ment"}] } } } ]

here is my code

 list.map((item, index) => {
        return (
          <div key={index}>
            <ul >{item.id}</ul>
            item.suppliercard.supplier.product.map((subitem, i) => {
              return (
                 <p>{subitem.name}</p>
              )
            })
          </div>
        )
      })

it's not working

Please edit... missing things like: what is it not working? what is the error that you get? etc. — Rushikumar
– Rushikumar, Commented Jan 10, 2018 at 14:32

margaretkru · Accepted Answer · 2018-01-10 14:33:38Z

1

You should wrap item.suppliercard.supplier.product.map in { } because it is not jsx but javascript that should be executed. Try this:

list.map((item, index) => {
      return (<div key={index}>
        <ul>{item.id}</ul>
        {
          item.suppliercard.supplier.product.map((subitem, i) => 
          (<p>{subitem.name}</p>)) 
        }
      </div>)
    })

answered Jan 10, 2018 at 14:33

margaretkru

2,78120 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

margaretkru Over a year ago

@mahigorige25, could you mark the answer as accepted if it solved your problem?

Collectives™ on Stack Overflow

How to render nested object elements map method [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related