Utilizing Axios to fetch data from DeezerAPI, I initially rendered information using .map() and everything worked smoothly when passing it to a Component. However, when attempting to access a single JSON object, I encountered an 'undefined' error.
Here is a snippet of the Axios request in React.js
//Using Redux state
//No issues with Redux
const apiData = useSelector((state) => state.data);
//Local State to store fetched data from API
const [Songs, setSongs] = useState([]);
//Fetching data through AXIOS
useEffect(() => {
const getFetchData = async () => {
try {
const res = await axios.request({
method: "GET",
url: "https://deezerdevs-deezer.p.rapidapi.com/search",
params: { q: apiData }, //for searching an artist, song...
headers: {
"X-RapidAPI-Host": "deezerdevs-deezer.p.rapidapi.com",
"X-RapidAPI-Key": "randomNumbersKey",
},
});
const data = res.data.data;
setSongs(data); //stored in state
} catch (error) {
console.log(error);
}
};
getFetchData();
}, [apiData]);
When trying to access a single JSON object using console.log() like the example below
console.log(Songs[0].title)
An error message appears:
Uncaught TypeError: Cannot read properties of undefined (reading 'title')It's perplexing why this occurs only when selecting a single object, as using .map() does not trigger any issues.
Appreciate any assistance in advance! :D