Tengo una solicitud de API que vuelve con.
externalLinks : { website: { _links: { self: { rel: 'self', method: 'get', href: 'http://www.example.com/', }, }, }, twitter: { _links: { self: { rel: 'self', method: 'get', href: 'https://twitter.com/', }, }, }, discord: { _links: { self: { rel: 'self', method: 'get', href: 'https://discord.gg/', }, }, } };y en mi render quiero generar un enlace para cada uno de los enlaces externos.
<div> { // Loop in here to generate links } </div>¿Cuál es la mejor manera?
Yo haría algo como lo siguiente:
const links = ( <div> <ul> { Object.entries(exLinks).reduce((str, [website, val]) => str += `<a href='${val._links.self.href}'>${website}</a>`, '') } </ul> </div> );Si está buscando específicamente usar la función de mapa, también puede hacerlo:
let element = ( <div> {Object.entries(exLinks).map(entry => `<a href='${entry[1]._links.self.href}'>${entry[0]}</a>` )} </div> )Puedes probar algo como esto con Object.entries
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
const obj = { website: { _links: { self: { rel: "self", method: "get", href: "http://www.example.com/", }, }, }, twitter: { _links: { self: { rel: "self", method: "get", href: "https://twitter.com/", }, }, }, discord: { _links: { self: { rel: "self", method: "get", href: "https://discord.gg/", }, }, }, }; const arr = []; for (const [key, value] of Object.entries(obj)) { arr.push({ ["website"]: value._links.self.href }); } console.log( "websites", arr.map((item) => item.website) );