Tengo que llenar el elemento li con datos almacenados como un objeto JSON. Con "título" funciona simple. Pero no lo es cuando se habla de los valores del nombre. ¿Cómo puedo mapear el objeto subMenú para obtener el nombre?
<ul> {data.map(({ title, subMenu }) => ( <li className="mobileMenu-body-nav-item"> <button className="mobileMenu-body-nav-item-btn"> *** here I have to put name *** </button> </li> ))} </ul>objeto JSON
[ { "title": "Breeds", "subMenu": [ { "id": 1, "name": "Dog Breeds" }, { "id": 2, "name": "Cat Breeds" } ] }, { "title": "About Pet Adoption", "subMenu": [ { "id": 3, "name": "About Dog Adoption" }, { "id": 4, "name": "About Cat Adoption" } ] } ]Como se señaló en los comentarios sobre la respuesta aceptada, los elementos div no son elementos secundarios válidos de los buttons ( pregunta relacionada ) y, aunque se debe asignar una key a los elementos asignados en React utilizando el índice de la matriz iterada, no siempre es ideal. (consulte los documentos o el artículo relacionado del comentario de TJCrowder).
Dado que está mapeando una lista anidada, parece más apropiado estructurarla como tal. Aquí usando el title como la clave li externa (aunque una propiedad única más definida sería mejor) y el subMenu.id como clave para la li interna.
<ul> {data.map(({ title, subMenu }) => ( <li key={title} className='mobileMenu-body-nav-item'> <ul> {subMenu.map(({ id, name }) => ( <li key={id}> <button className='mobileMenu-body-nav-item-btn'>{name}</button> </li> ))} </ul> </li> ))} </ul>Puedes simplemente llamar al map de nuevo, así:
<ul> {data.map(({ title, subMenu }) => ( <li className="mobileMenu-body-nav-item"> <button className="mobileMenu-body-nav-item-btn"> {subMenu.map(({ name }) => (<span>{name}</span>))} </button> </li> ))} </ul> Cambie la etiqueta <span> para que coincida con la forma en que desea que se represente este contenido.
Además, si se trata de React, no olvide configurar la key de manera adecuada cuando use el map :
<ul> {data.map(({ title, subMenu }) => ( <li key={title} className="mobileMenu-body-nav-item"> <button className="mobileMenu-body-nav-item-btn"> {subMenu.map(({ name }) => (<div key={name}>{name}</div>))} </button> </li> ))} </ul>