CODEWITHSUNDEEP
reactjsreact-hooks
lydia michael
lydia michael

Reputation: 29

how to make an object with multiple object an array in state?

This is my code,

import React, { useState, useEffect } from "react";
import axios from "axios";

import "./App.css";

function App() {
  let [albums, setAlbums] = useState([]);
  useEffect(() => {
    const key = "blablabla to keep secret";
    const fetchData = async () => {
      const result = await axios(
        `http://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=cher&api_key=${key}&limit=10&format=json`
      );

      setAlbums(result.data.topalbums);
      console.log(albums, "data?");

      // const { data } = props.location.state;
    };

    fetchData();
  }, []);
  return <div className="App"></div>;
}

export default App;

the data I am fetching is in an object with objects inside, in-state I initialized with an empty array, and then after I fetched the data I use setAlbums. I have two problems, the console.log after I fetch just shows me an empty array, but when I console log in render I do get the data but it is an object and not an array of objects, so I can't even map over it, how do I fix this?

Upvotes: 1

Views: 448

Answers (1)

Zirek
Zirek

Reputation: 523

Try to do something like this:

setAlbums(album => [...album, results.data.topalbums])

that way you can push results to your array instead of transforming it into object

also if you wish to see updated album then create something like:

useEffect(() => {
console.log(albums)
},[albums])

as setting state is asynchronous therefore it doesn't happen immediately as Brian mentioned, so this code will launch if albums state changes its value

Upvotes: 1

Related Questions