Mapping over an array of object-CodePudding

I want to map over this array of objects below in react Js, how do I go about it?

[{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]

CodePudding user response：

const data = [{"items":[{"name":"meat","price":"4"},{"name":"metty","price":"2"}],"name":"Merry food","price":null},{"items":[{"name":"beaf","price":"3"},{"name":"fish","price":"4"}],"name":"Means","price":null}]
const List = () => {
  return (
    <>
      {data.map(datum => datum.items.map(item => 
        <div>item.name</div>
      ))}
    </>
  )
}

CodePudding user response：

You can simply use an map function that is provied for arrays in Javascript.

data.map((item) => console.log(item));

You can view the example I created for your data here https://stackblitz.com/edit/react-ts-zp4b2r?file=App.tsx