Estoy trabajando en un proyecto NextJs con una tienda Firebase. Accedo a una colección y obtengo una matriz con objetos con una clave aleatoria y como valor los datos:
const data = [ { randomdocid67233: { name: "ABC", latinName: "DEF" } }, { randomdocid6d7dddd233: { name: "GHI", latinName: "JKI" } } ];Debido a que no conozco el randomdocid, no puedo entender cómo mostrar el nombre y el latinName. He hecho un codesandbox con el problema para ilustrarlo: https://codesandbox.io/s/spring-fast-w0tt4?file=/src/App.js:56-268
Estoy seguro de que es realmente fácil de hacer, pero parece que no puedo resolverlo. ¡Ojalá alguien lo sepa!
Gracias Santi
Primero debe obtener la clave dentro de cada objeto y devolver el valor de esa clave en el mapa. Actualice el código en función de su necesidad de representar los datos después de obtenerlos. Puedes hacerlo así
export default function App() { const data = [ { randomdocid67233: { name: "ABC", latinName: "DEF" } }, { randomdocid67233: { name: "GHI", latinName: "JKI" } } ]; const newData = data.map(item => { const key = Object.keys(item)[0]; return item[key] }) return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> {newData.map((item, index) => ( <div key={index}> {item.name} {item.latinName} </div> ))} </div> ); }Puede usar Object.keys() como solución aquí
{data.map((item, index)=> { let key=Object.keys(item)[0] return <div key={key}> // better to use unique key value then index {item[key].latinName} </div> )}