Estoy implementando una practica para mostrar los datos obtenidos del Backend y mapearlos.Tengo el siguiente array de objetos con el que realizo mis pruebas:
const test = [
{id: 10, value: "Tema1", },
{id: 20, value: "Tema2", },
{id: 30, value: "Tema3", },
{id: 40, value: "Tema4", },
];
Lo mapeo de la siguiente forma:
{test.map(({id, value}) => (
<p key={id}>
{value}
</p>
))}
Todo resulta correcto, pero cuando quiero mapear los datos que me llegan del Backend, no los muestra. Así obtengo los datos:
const response = await GetTopics(); // Respuesta del Backend
arrayTopics = response.data.topics; // Obtengo array
console.log(arrayTopics);
Este es el array que imprime:
Es un array de arrays, lo que quiero hacer es tener los datos por 'id' y 'value' como en mi variable test y mapearlos, pero no resulta, esto es lo que tengo para intentar darle esa forma:
const response = await GetTopics(); // Respuesta del Backend
arrayTopics = response.data.topics; // Obtengo array
console.log(arrayTopics):
// Continua el código...
const topics = [];
for(let element of arrayTopics){
topics.push({ id: element[0], value: element[1]},)
}
console.log(topics)
Después de realizar el código anterior obtengo un array de objetos, igualito a mi variable test:
Pero al mapearlos no me muestra nada, es como si estuviera vacio. Agradeceria mucho cualquier aportación, no me cierro a aprender otras formas de solucionarlo. Gracias por su tiempo :)
topics
debe ser una variable de estado en el componente, hay que hacer el set correspondiente, luego se mapeatopics
justo como haces contest
Object.keys