Transformar un array de objetos en enlaces es una forma de crear un listado de enlaces con una programación más funcional. Esta estrategia puede ayudarnos cuando estamos creando una aplicación en donde haya una página de tipo listado, ya sea con React o con JavaScript. En este post, te enseñaremos cómo transformar un array de objetos en enlaces para crear una página listado en React.
¿Por qué transformar un array de objetos en enlaces?
Antes de enseñarte cómo transformar un array de objetos en enlaces, te proponemos una situación donde esta estrategia puede llegar a ser útil. Supongamos que hemos creado una aplicación con create-react-app y ahora queremos crear una página que tenga una estructura similar a la de un perfil de Twitter. Es decir, que tenga un listado con distintos Tweets enlazados. Entonces, hemos creado una página listado en React con el siguiente componente de tipo función:
const TweetsPage = ( ) => (
<div> className = "tweetsPage">
<ul>
<li> Primer Tweet </li>
<li> Segundo Tweet </li>
</ul>
</div>
);
export default TweetsPage;Como puedes ver, hasta ahora este componente es un poco complejo, pues debemos saber cuál es nuestro primer y segundo tweet. En realidad, lo idóneo sería tener un array, un objeto enfocado en crear listados, que contenga nuestros distintos tweets. Así, a partir de este listado de objetos, podríamos crear el listado de enlaces y simplificar nuestro flujo de trabajo.
¿Cómo transformar un array de objetos en enlaces?
Para transformar un array de objetos en enlaces, lo primero que debemos tener es un array de objetos. Supongamos que tenemos el siguiente array con dos objetos que representan cada uno un tweet. Este objeto tiene las propiedades content, link, userId, updatedAt: y id. A continuación, te presentamos este objeto:
const tweets = [
{
content: "Nos hace mucha ilusión anunciar el ESTRENO de nuestra nueva película",
link:' https://www.tweet1.com',
usetId: 1,
updatedAt: '2021-03-15T18:23:57,5792',
},
{
content: "Soy muy fan tuya, pero ahora no me acuerdo de cómo te llamas",
link: 'https://www.tweet2.com',
usetId: 2,
updatedAt: '2021-03-15T18:24:56,7732',
},
];Ahora que tenemos el objeto Tweets, es hora de transformar un array de objetos en enlaces. Lo ideal sería que, como el array tweets tiene dos objetos, obtuviéramos de vuelta dos elementos de lista en los que podemos enlazar. Es decir, queremos transformar un array de objetos en un array de li.
En React utilizamos un lenguaje llamado JSX. Sin embargo, como React es una librería de JavaScript, también tenemos acceso a todo el código de JavaScript. Para poder acceder a este código, debemos abrir una ventana a JavaScript en React por medio del símbolo de llaves { }. Una vez que abrimos y cerramos llaves, estamos en terreno JavaScript. Esto nos permite acceder al método map, con el cual podemos transformar cada elemento de un array y obtener un array nuevo de vuelta.
Entonces, para poder transformar un array de objetos en enlaces, deberemos aplicarle una función al método map. En este caso, el método map manipulará el array ‘tweets’ para devolvernos un elemento li. Por ello, podemos llamar al parámetro de nuestra función tweet.
A continuación, puedes ver cómo quedaría este método:
{tweets.map (tweet => <li></li>)}Con la línea de código anterior, hemos abierto una ventana a JavaScript. En esta ventana, le hemos dicho a nuestro programa que coja el array tweets y recorra cada uno de los elementos tweet para transformarlos en un elemento li.
Para ver el resultado de esta función, te invitamos a abrir el inspector de tu navegador. Allí encontrarás que ahora hay dos elementos li en vez de los objetos previamente creados en el array tweets. Esta estructura también la puedes explorar usando la herramienta React Developper Tools, con la que puedes visualizar la jerarquía de tus componentes React.
Ahora que has podido transformar un array de objetos en enlaces, puedes añadir el contenido que quieres mostrar a tu función map. Ya que nuestro objeto original tiene distintas propiedades, podemos acceder a ellas en la función de transformación. Esto se vería de la siguiente manera:
{tweets.map (tweet => <li>{tweet.link}</li>)}Ahora que sabes cómo transformar un array de objetos en enlaces con JavaScript y React, ¡puedes importar todo tipo de datos y convertirlos en tus proyectos React! Sin embargo, todavía queda mucho que aprender para ser un experto del desarrollo web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar lenguajes de programación para la web, tales como JavaScript, JSX, CSS y HTML. ¿Te animas a dar el siguiente paso con nosotros? ¡Inscríbete ya!
