Passing API request parameter via props from child to parent - reactjs

Question

I have 2 Api requests, one of them hangs on the child - from it, when I click on the picture, I get the track key and give it to the parent in the second Api request as a parameter so that it displays the information I need. But when I output this to the console, I get an empty message =(
result console.log
CHILD
import React from 'react'
import { AppContext } from '../MainContent'
import TrackTranding from './TrackTranding'
const ContentTrending = ({ onClick }) => {
const { articles, setArticles } = React.useContext(AppContext)
const handleClick = (e) => {
e.preventDefault();
onClick(articles[e.target.dataset.attr].key) // get key from first api
}
return (
<div className="main__content-trending">
<p>Tranding right now</p>
<div className="noflex-oneblock">
<div className="main__content-trending-artist-title ">
{
articles.map((tracks, index) => {
return (
<div className='one' key={tracks.key}
onClick={handleClick}
>
<TrackTranding
tracks={tracks}
index={index}
/>
<audio src="#" id="audioTrack"></audio>
</div>
)
})
}
</div>
</div>
</div>
)
}
export default ContentTrending
PARENT
import axios from 'axios'
import React from 'react'
import MainContentBg from './MainBcg/ContentBg'
import MainContentTitle from './MainTitle/ContentTitle'
import ContentTrending from './MainTrending/ContentTrending'
export const AppContext = React.createContext()
const MainContent = () => {
const [articles, setArticles] = React.useState([])
const [detailse, setDetailse] = React.useState([])
const [name, setName] = React.useState('');
const handleClick = (name) => {
setName(name)
console.log(detailse) // --------------------------- error =()
}
const fetchData = () => {
const chart = {
method: 'GET',
url: 'https://shazam.p.rapidapi.com/charts/track',
params: { locale: 'en-US', pageSize: '20', startFrom: '0' },
headers: {
'X-RapidAPI-Key': '10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88',
'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
}
};
axios.request(chart).then(data => {
const tracksApi = data.data.tracks
setArticles(tracksApi)
})
const details = {
method: 'GET',
url: 'https://shazam.p.rapidapi.com/songs/get-details',
params: { key: { name }, locale: 'en-US' }, // ---------------------------------- param
headers: {
'X-RapidAPI-Key': '10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88',
'X-RapidAPI-Host': 'shazam.p.rapidapi.com'
}
};
axios.request(details).then(data => {
const tracksDetails = data.data
setDetailse(tracksDetails)
})
}
React.useEffect(() => {
fetchData()
}, []);
return (
<main className="main">
<div className="main__content">
<AppContext.Provider value={{ articles, setArticles }}>
<MainContentTitle />
<MainContentBg />
<ContentTrending onClick={handleClick} />
</AppContext.Provider>
</div>
</main>
)
}
export default MainContent

Answer 1

Currently you call fetchData when the component first mounts the name state is set to an empty string "".
React.useEffect(() => {
fetchData();
}, []);
Which you're passing in the details so essentially the object looks like this:
const details = {
method: "GET",
url: "https://shazam.p.rapidapi.com/songs/get-details",
params: { key: { name: "" }, locale: "en-US" }, // notice the empty string
headers: {
"X-RapidAPI-Key": "10eb9d1c65msh1029069c658be40p1197a5jsne7f1ee8c9f88",
"X-RapidAPI-Host": "shazam.p.rapidapi.com",
},
};
Instead what you can do is trigger the useEffect when the name changes. Which will now have the updated name from the handleClick from the Child.
React.useEffect(() => {
fetchData();
}, [name]);
You probably want to change, currently you're setting the key to a object with another prop called name.
params: { key: { name }, locale: 'en-US' }
to, this will make sure the key prop has the value from name
params: { key: name, locale: 'en-US' }