EDITAR: Ninguna de las soluciones a continuación funcionó para mí, así que después de jugar con la de ido ben ami, conseguí que esto funcionara:
{ array.map(project => <Box> <Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value={Object.keys(project)[0]}>{Object.keys(project)[0]}</Typography> { Object.entries(project)[0][1].map(ticket => <MenuItem sx={{ml: 3}} value={ticket}>{ticket}</MenuItem>) } </Box> ) }Originalmente había usado fragmentos en lugar de Box, pero a Material UI no le gusta eso para Select. Si omití uno de estos dos, no funcionó porque los 2 componentes que se generaron no son los mismos.
Los datos de mi backend son como tales (la cantidad de proyectos/boletos varía obviamente):
[ { "Project 1": [ "Ticket 1", "Ticket 2", "Ticket 3", ] }, { "Project 2": [ "Ticket 4" "Ticket 5" "Ticket 6" ] } ]Necesito mapearlo para generar elementos para mi componente Select. Este es el resultado que busco, pero no sé cómo hacerlo con Object.entries u Object.keys/Object.values:
<Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value="Project 1">Project 1</Typography> <MenuItem sx={{ml: 3}} value="Ticket 1">Ticket 1</MenuItem> <MenuItem sx={{ml: 3}} value="Ticket 2">Ticket 2</MenuItem> <MenuItem sx={{ml: 3}} value="Ticket 3">Ticket 3</MenuItem> <Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value="Project 2">Project 2</Typography> <MenuItem sx={{ml: 3}} value="Ticket 4">Ticket 4</MenuItem> <MenuItem sx={{ml: 3}} value="Ticket 5">Ticket 5</MenuItem> <MenuItem sx={{ml: 3}} value="Ticket 6">Ticket 6</MenuItem>prueba esto
<Box> {array.map((project, projectIndex) => ( <Box key={projectIndex}> {console.log(Object.entries(project))} <Typography variant="subtitle1" sx={{ fontWeight: 'bold', ml: 2 }} value={Object.entries(project)[0][0]}> {Object.entries(project)[0][0]} </Typography> {Object.entries(project)[0][1].map((ticket, ticketIndex) => (<MenuItem key={ticketIndex} sx={{ ml: 3 }} value={ticket}>{ticket}</MenuItem>))} </Box> ))} </Box>pero si tiene acceso para realizar cambios en el backend, le recomendaré guardar los datos de esta manera:
[ { "projectName": "Project 1" "tickets": [ "Ticket 1", "Ticket 2", "Ticket 3", ] }, { "projectName": "Project 2" "tickets": [ "Ticket 4" "Ticket 5" "Ticket 6" ] }]
Tienes una variedad de objetos. En estos objetos solo tienes una propiedad. Esas propiedades son otra matriz de cadenas.
No sé qué está haciendo exactamente la tipografía del componente y será mi solución buena para su código y optimización, pero. puedes probar algo como esto:
Antes de representar el componente (no JSX)
let backEndValue = [ { "Project 1": [ "Ticket 1", "Ticket 2", "Ticket 3", ] }, { "Project 2": [ "Ticket 4", "Ticket 5", "Ticket 6", ] } ] const [title,setTitle] = useState(''); const [subTitle,setSubTitle] = useState(''); setProjects = []; Object.keys(backEndValue).map((prop) => { return setProjects.push(backEndValue[prop]); }) setProjects.map((prop)=>{ const temp = Object.keys(prop); const tempT = prop[temp]; setTitle(temp); setSubTitle(tempT); })En renderizado (JSX)
{ title.map((prop,index)=>{ return <Typography key={index} variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value={prop}>{prop}</Typography> }) } { subTitle.map((prop,index)=>{ return <MenuItem key={index} sx={{ml: 3}} value={prop}>{prop}</MenuItem> }) }