score:0
Accepted answer
i am assuming you would like to get a list of areas, each with their bars underneath?
you can embed a second map within the first to achieve this:
{data.map((value) =>
<div>
<contentitem title={value.area} key={value.area}/>
{value.bar.map(bar=>
<barnavigation id={bar.title} key={bar.title}/>)}
</div>
)}
the full block would look something like:
const data = [
{
area: 'avenyn',
bar: [
{
title: 'yaki-da',
image: '',
info: 'fdsfsdfsdfsdfsdfsdf'
},
{
title: 'lounge',
image: '',
info: 'fdsfsdfsdfsdfsdfsdf'
},
{
title: 'hardrock-cafe',
image: '',
info: 'fdsfsdfsdfsdfsdfsdf'
},
{
title: 'valand',
image: '',
info: 'fdsfsdfsdfsdfsdfsdf'
},
],
},
{
area: 'hisingen',
bar: [
{
title: 'ölstugan',
image: '',
info: 'fdsfsdfsdfsdfsdfsdf'
},
],
}
]
const mypage = () => {
return (
<div style={rootstyle}>
<switch>
<route exact path="/">
{data.map((value) =>
<div>
<contentitem title={value.area} key={value.area}/>
{value.bar.map(bar=>
<barnavigation id={bar.title} key={bar.title}/>)}
</div>
)}
</route>
{data.map((value) =>
<route path={'/' + value.area}>
{bars.map((value: string) => <barnavigation id={value} key={value}/>)}
</route>
)}
</switch>
</div>
);
}
Source: stackoverflow.com
Related Query
- Array with three major objects compare
- Compare Two different arrays and update array of objects with useState in React
- Material UI Autocomplete implementation with options containing array of objects (ID and label)
- How to validate with Yup that in array of objects at least one of object keys has true value?
- Array of objects with mui-datatables
- mapping an array of objects and changing the value with on onClick in React
- How can I use `setState` with objects nested in an array in React JS?
- Generate options by mapping over array of objects with react-select
- React State update a nested array with objects based on the id when iterated
- Add an object with setState() to an array of objects
- How to merge two array of objects with reactjs?
- Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead
- Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead
- Iterate over an array of objects with object having multiple properties
- check if an object with a specific key value exists in an array of objects
- React - convert object into array of objects with properties
- How to delete objects from react state hook array with a button click
- mapping and filtering an array of objects with key
- Cycle through objects in an array by setting state with a button React
- Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead
- In Javascript, replace forEach that involves filtering the same array of objects each time through loop with a left join
- Accessing nested keys in object and compare them to other object keys, but the 2nd one is an array of objects
- objects in array with reactjs
- Compare date and time in array of objects
- Error: Objects are not valid as a React child (found: object with keys {}). use an array instead
- Objects are not valid as a React child (found: object with keys {job}). If you meant to render a collection of children, use an array instead
- Creating an array in React with objects created from two lists
- Filter array of objects by another array with duplicate keys
- object.assign is overwriting all objects in my array with duplicate information
- Compare current to previous when mapping array of objects onto html elements
More Query from same tag
- When to use componentWillReceiveProps lifecycle method?
- useState doesn't act like I am anticipating it to
- How can I increase the distance between two buttons in React?
- React: Render and link toggle button outside the class
- Redux , Getting all the state instead of the state that i passed
- React - get time of long pressing button in seconds
- how to pass param props to redux container
- ReactJS CSS - how do I re-trigger a @keyframes CSS animation
- React - Uncaught TypeError: Cannot read properties of undefined (reading 'setState')
- React: Target container is not a DOM element
- What is the best practices for redirecting users in React applications?
- Method require() doesn't work with mapped reference image links - React
- Websocket post request to NODE server and not get response
- reactJS dynamic drop down populated with map function
- ReactJs Checkbox - cannot uncheck
- Cannot add to list of items in ReactJS
- Is it possible to keep the current component mounted as the "fallback" content for React.Suspense after the initial page load?
- React.js: How to show base64 image with ImageField of react-admin
- Add Property to StatelessComponent
- I am having npm issues I do not understand when I run `npm install`
- What is the purpose of react-helmet?
- How to do async callbacks with state
- React | CSS-Modules | Materialize-CSS: .browser-default not being applied
- React: How to Pass State on Each Mapped Array Items?
- Indexing in React when rendering element through loop
- How to custom color text and icon in TableSortText component of Material-ui?
- How to alter deeply nested children?
- React render Epoch timestamp convert to am pm
- React-Hooks: How to call a function returned by useState
- express download csv attachment on response not working