score:3
Accepted answer
so why can't you do something like:
const multilevel = ({multilevel}) => (
<ul>
{object.keys(multilevel).map(key => (<li key={key}>{key} /* etc*/</li>))}
</ul>
);
{data.megamenu.map((menuitem, index) => (
<li key={menuitem.name}>
{menuitem.name}
<ul>
<li>multilevel
<multilevel multilevel={menuitem.multilevel}/>
</li>
</ul>
</li>
))}
that's a bit complex, and i advice you to separate your lists to different components to make code readable.
score:0
you need to loop through inner multilevels
{data.megamenu.map((menuitem, index) => (
const innneritemsdom = menuitem.multilevel.map((item, index) =>{
return <li>
<ul>
<li>item.name</li>
</ul>
</li>
})
return <li> level1.2
{innneritemsdom}
</li>
))}
Source: stackoverflow.com
Related Query
- Display and Map Multiple Keys and its object data
- How to iterate with Object Dot Keys and Array Dot Map to display data in a component?
- Map dictionary keys to rows and display its values
- React.js iterate through object keys and values using map
- Display data in a React component from an object where the keys are different but the values are the same
- how to display and map the first id of an state or const data array objects?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- React JS: Rendering object keys and its values
- How to sort Map object data by value instead of its key?
- How to fetch and display data from multiple endpoints in React?
- Objects with data into object with list of keys and values - javascript
- How do I map an through an array of objects and display each object individually? I want each pizza order to show
- Loop through json object and display the data with React?
- Loop over keys in a child object and display both key and value
- I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys {children}), How do i solve it?
- Map over two arrays and display data in a single table?
- Map over an object array and display another element at a certain position
- how to display object data in react with map method
- Data object with array of different groups, trying to display ordered by group type using .map() and pushing to new array nothing is rendering
- How to map object data and render in React?
- React display data from object TypeError: value map is not a function
- React map through multiple arrays of objects and display components on site?
- Use map function for array object and display in table in React
- Is there a way I can map the keys of an object to render keys of a nested object as a list under its respective category
- How to loop through an array and display data within the object of that array, in react and javascript
- How to map through an Array of object with the same data on some object and get it displayed once and also get other properties
- can't display data form json object with Object.values and .map in React
- can't display data form json object with Object.Keys and .map in React
- How to display POST API data containing string using fetch and map function in React
- How can I map array with multiple objects and display on chart?
More Query from same tag
- How to reference a React Component class from outside the render function?
- Why won't custom input controls validation properly in Ant Design forms?
- React-card-flip, Map through data and flip one card at a time
- Scala.js - Inject contents of css file into an inline <style> tag
- How to remove window eventListener in React component?
- How to destructure from a separate destructured property in a single line?
- Passing in parameter to Styled Components
- Require not defined in script tag
- How to pass conditionally a true or false to React boolean props with typescript?
- Transform function to useCallback
- Optional field image and 'childImageSharp' as null | Gatsby, GraphQL & YAML
- How to get decimals in an input number field to register in its value?
- Rendering objects dynamically with KonvaJs-ReactJs
- How to change the colour of a Button(Material UI) upon setting it as disabled dynamically?
- Access Child component reference from Parent Component
- Converting the date returned from the server to the format used by the React Date Picker
- React, typescript and prop-types: how to use own type?
- React.js Cant replace image source when image throws a 500 error
- Why my firebase "onAuthStateChanged" don't clear from useEffect Hook?
- Adding a day to React state Date object created using useState
- Passing parameters to reduce function
- React JS - How to authenticate credentials via a fetch statement
- How to integrate whatwg-fetch in Gatsby
- Reducer returning twice, secondly returning undefined
- How do I get the inner react-text of an element using Selenium WebDriver and Java?
- Map over two arrays and display data in a single table?
- Integrate React-Semantic-UI and redux-form
- Axios get multiple JSON end points and save into state (react)
- How to make Formik return a boolean?
- How can I update the state in a class component?