Before I'm hit with a possible duplicate tag hear me out.
I have the code
const [value, setValue] = useState();
const [data, setData] = useState();
const handleChange = (e) => {
setValue(e.target.value);
};
const handleClick = () => {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Host': 'advanced-movie-search.p.rapidapi.com',
'X-RapidAPI-Key': 'myKeyHere'
}
};
fetch(`https://advanced-movie-search.p.rapidapi.com/discover/movie?
with_genres=${value}&page=18`, options)
.then(response => response.json())
.then(response => {
let res = response
setData(res)
console.log(res)
})
.catch(err => console.error(err));
};
// then returning this here like this.
<div className="card">
<h2>{data?.results?.[Math.floor(Math.random() * data.results.length)].title}</h2>
<p>{data?.results?.[Math.floor(Math.random() * data.results.length)].overview}</p>
</div>
as you can see here I'm calling an api which returns an array of 20 items then randomly selecting one every time the button is clicked. as you can probably tell from the p tag which is running the same random selection this too will pull a random "overview" from any of the 20 objects from the array.
What I'm trying to is once the title is pulled randomly in the h2 then all other data I call will come from only that object.
What I thought would would is to take the object that gets called and save it to a state then call it with state.overview or whatever I have no idea if that will work or how to even do it though.
Thanks in advance!
CodePudding user response:
Here is my solution:
- move the api call to an useEffect without dependencies to run only on mount (completely optional)
- create a new state to store a random number, let's say
currentResult
- on every button click, generate a random number an save it into
currentResult
usingsetCurrentResult
- refactor the render template to use
data?.results?[currentResult]...
const [value, setValue] = useState();
const [data, setData] = useState();
const [currentResult, setCurrentResult] = useState(null);
const handleChange = (e) => {
setValue(e.target.value);
};
const handleClick = () => {
// Fetch if you want
setCurrentResult(Math.floor(Math.random() * data.results.length))
};
// then returning this here like this.
{currentResult && (
<div className="card">
<h2>{data?.results?.[currentResult].title}</h2>
<p>{data?.results?.[currentResult].overview}</p>
</div>
)}