I try to display api data but nothing comes out, not even an error on React

I’m slowly understanding the services and fetch with React but when I try to show something, it shows me absolutely nothing. I put the code in case someone can help me. Maybe I have to look at how to work with JSON, I don’t know.

let datosApi = [];

const recogerDatos = () => {
    let json = "https://jsonplaceholder.typicode.com/albums";
    let miApi = "http://localhost/dsw/api/";
        .then(data => data.json())
        .then(info => {
            this.datosApi = info;

function Services() {
    return (
            {datosApi.map(datos => (

export default Services;

JSON data appears in https://jsonplaceholder.typicode.com/albums

>Solution :

I think your example is missing something or you’ve not done it.

Basically there’s a few things wrong:

  1. recogerDatos is never being called
  2. datosApi is not declared, and even if it was, it’s not stateful, thus won’t cause a re-render of your items.

I’ve created a working sandbox here that shows it working, and the code is below:

const [result, setResult] = useState([]);
const recogerDatos = () => {
  let json = "https://jsonplaceholder.typicode.com/albums";
    .then((data) => data.json())
    .then((info) => {

useEffect(() => {
}, []);

return (
  <div className="App">
    {result.length > 0 && result.map((datos) => <p>{datos.title}</p>)}

The recogerDatos function is called on page load (see useEffect), and the result is updated when the fetch is successful. This causes a re-render and the items are shown.

Leave a Reply