score:0
i think the issue might be that it can't deconstruct the array you're passing. if you do ({obj})
, it's being deconstructed and it accesses its properties. if it can't be deconstructed, it fires up an error.
it should work like this
const nav = ( navitems = [] ) => {
const subitems = navitems.map(el => el.submenu)
return (
{navitems.map(item => (
<li>
<a href="#">{item.label}</a>
<ul>
{subitems[0].map(subitem => (
<li>{subitem.item}</li>
))}
</ul>
</li>
))}
)
}
score:1
here you go :
const nav = ({ navitems = [{submenu : []}] })
// i think you also need to set for label also, else will throw error while render
const nav = ({ navitems = [{ label: "default label" ,submenu : []}] })
suggestion , you can change the code block to something like this :
const nav = ({ navitems = [] }) => {
// there is no need of below line
// const subitems = navitems.map(el => el.submenu)
return (
{navitems.map((item) => (
<li>
<a href="#">{item.label}</a>
<ul>
{item.submenu.map(subitem => ( //<---- you can use it like this
<li>{subitem.item}</li>
))}
</ul>
</li>
))}
)
}
Source: stackoverflow.com
Related Query
- Setting Default Parameters With Nested Array
- Setting state of nested array with React Hooks
- Typescript and React setting initial state with empty typed array
- Setting a default value with react-select not working
- ES6 Object Destructuring Default Values for Nested Parameters
- How can I use `setState` with objects nested in an array in React JS?
- React State update a nested array with objects based on the id when iterated
- Pushing and Pulling an nested array with setState with Javascript
- Merge nested array with unique element in Javascript
- Cycle through objects in an array by setting state with a button React
- React hook forms with nested fields array from an async source returns empty array
- update nested state object with array inside
- Array Find() method is always returning 'undefined' while searching data with respect to URL parameters
- How to update Nested Array with useReducer?
- How to convert javascript obj into URL parameters with nested object in it?
- How to mutate complex object with nested array with SWR?
- Transform excel 2D array into nested properties object with column names included
- Transmit default function parameters with Babel
- How to get the last children in a deeply nested array with objects
- Map nested array with JavaScript
- React - setting state with data does not work/ sets its to an empty array - why?
- useState not setting inital state with a filtered array
- Query API with Array Parameters in React
- How to pass parameters with a default value?
- Filter nested data with array vales using lodash react js
- set state array with nested array values from object
- server fall back and nested routes with react-router and url parameters
- React-Redux update state of immutable object with nested array, delete element from array
- Adding object in Array in nested object with setState
- React hooks form, setting default values from a reduced array doesn't populate, but manually enterring same object does
More Query from same tag
- React + Typescript object props to component error
- Test if Material-UI withStyles component with required PropTypes is rendered?
- React: Map rendering component causing unnecessary re-renders, child key props not working?
- Why is my component unable to access data from my reducer?
- Cant Render React Componet, Error In my understanding or code?
- What is the alternative for Redirect in react-router-dom v 6.0.0?
- React+Expressjs Deployment
- ReactJS error: make sure to pass up the same props that your component's constructor was passed
- React JS doesn't render on first time
- How do I set a value for a <select> with React without using onChange?
- Migration to React 16.0.0 Error: Cannot find module "react/lib/ReactComponentTreeHook"
- ReactJS Webpage not displaying correctly
- React TypeScript: the Key System
- Displaying Firebase data as array in Javascript/HTML
- Render react component, based from other file option
- How to highlight selected button in React?
- How to save an array of objects in localStorage? Getting TypeError: push is not a function
- How to dispatch action from a child window?
- How do I fetch only once?
- React multiple input (array of inputs) not working
- React.js Firebase and Firepad Component
- React Redux - Display string stored in Redux state within Input field
- Redux Form: returning a promise from asyncValidate using async functions
- Array of Children inside Context Provider
- Incorrect array index being remove react/redux
- Fetch from products API after fetching from Categories API done?
- REDUX SAGA - API Retry Isomorphic Fetch
- The ` fetch("/createpost", {...} ` is not working properly
- React setState for multi level state object
- How do I use grid-template-areas in styled-components with react?