Pintar datos de una API en React es una acción fundamental en el desarrollo de aplicaciones. Puede que en tu API tengas el listado de empresas en una búsqueda de trabajo o los datos que el usuario ha insertado para entrar a la aplicación. Sea lo que sea, es importante saber cómo hacerlo. Por ello, en este post, te enseñaremos cómo pintar datos de una API en React para que lo hagas en tus propios proyectos.
Antes de empezar
Lo primero que necesitamos para pintar datos de una API en React es definir cuál es la API y endpoint del que vamos a recibir datos. Para este ejemplo, usaremos una API balldontlie.io, un repositorio gratuito para acceder a datos de la NBA. Esta API tiene varios endpoints para darnos distintos datos. Podemos, por ejemplo, acceder a jugadores históricos de la NBA.
Si quieres seguir este tutorial paso a paso, pero no quieres crear un archivo de código nuevo, te recomendamos utilizar Code SandBox, ideal para escribir líneas de código rápidas de desarrollo web. Allí, puedes seleccionar React para crear un nuevo proyecto de manera sencilla. Basta con que le pongas un nombre y empieces a codificar.
Entonces, ahora que tenemos el endpoint anterior con un número de elementos determinado en su data, vamos a aprender a pintar datos de una API en React.
¿Cómo pintar datos de una API en React?
Para pintar datos de una API en React, debemos hacer una llamada al endpoint que queremos y guardar sus datos en un estado. Esto nos permitirá, después de pintarlos, ejecutar diversas acciones con los datos, como crear un filtro de búsqueda en React.
Entonces, lo primero que debemos hacer es crear un estado dentro de un componente. En este caso, organizaremos los datos en un array, por lo que inicializaremos el estado a un array vacío:
export default function App ( ) {
const [players, setPlayers] = useState ([ ])
Ahora, en el return de este componente de tipo función, crearemos una lista para pintar datos de una API en React. En esta lista, crearemos una función que recorra los datos de la API y nos devuelva por cada objeto player un elemento de lista. De este modo, los pintaremos de manera ordenada:
return (
<div className = «App»>
<ul>
{players.map (player => <li key={player-id}></li>)}
Recuerda que siempre que utilices el método map debes usar el key prop en React. Esta es una propiedad que define un identificador único para cada elemento que se recorre y pinta. Nosotros hemos definido que la key es el id de cada objeto, pero puedes usar cualquiera de sus claves, mientras sean diferentes.
Ahora que hemos creado esta lista, podemos definir qué datos queremos presentar de los objetos que están en la API.
En el caso de nuestro ejemplo, los objetos tienen las propiedades first_name, height_feet, height_inches, last_name, position, weight_pounds y team. Digamos que solo queremos presentar los datos de first_name y last_name. Entonces, debemos acceder a estos datos con el comando player.first_name y player.last_name:
return (
<div className = «App»>
<ul>
{players.map (player => <li key={player-id}>
{player.first_name} – {player.last_name}
</li>
))}
Con las líneas de código anteriores, hemos definido nuestro render del componente y cómo se van a ver los datos. Pero todavía falta un paso fundamental: lanzar la petición a la API. Un lugar ideal para esto es en el hook useEffect, que se ejecuta justo después del primer render. A continuación, te mostramos cómo queda esta petición con la palabra clave fetch:
useEffect (( ) => {
fetch (‘URLdelAPI’)
.then ((response => response.json ( ));
.then (( {data}) => setPlayers (data));
}, [ ])
Para proyectos más grandes que solo un ejemplo, te recomendamos hacer que la llamada a la API esté en un servicio en un archivo aparte. Para conocer más sobre esto, te recomendamos leer nuestros artículos sobre traer contenido de una API en React, configurar un cliente en Axios y crear una función get con un cliente Axios.
¿Cuál es el siguiente paso?
Al leer este post, no solo has aprendido cómo pintar datos de una API en React, sino que también has dado un paso importante para dominar esta librería de JavaScript. Ahora, si quieres seguir instruyéndote para alcanzar tu objetivos de ser un desarrollador web y darle un giro a tu vida, debes aprender a dominar otras herramientas. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio en el que aprenderás a desarrollar con diferenes lenguajes y herramientas de programación para adentrarte en el sector IT por la puerta grande. ¡No te lo pierdas y pide ahora más información!
