Can you tell me if my code is right or wrong? - reactjs

Question

Page1 code
import React, { useState } from 'react'
import Header from '../Components/Header'
import MainQuiz from '../Components/MainQuiz'
const Turner = () => {
const [select, setSelect] = useState();
return (
<>
<Header />
<div className='text-center fs-3 text-uppercase'>Turner</div>
<div className="container p-5">
<select className="form-select" aria-label="Default select example" value={select} onChange={e => setSelect(e.target.value)}>
<option selected>Select The Quiz</option>
<option value="1">Turner 1</option>
<option value="2">Turner 2</option>
<option value="3">Turner 3</option>
<option value="4">Turner 4</option>
</select>
<MainQuiz value={select}/>
</div>
</>
)
}
export default Turner
Page2 code
import React, { useEffect, useState } from 'react'
const MainQuiz = (props) => {
const [data, setData] = useState([])
const url = `https://quizstcapi.herokuapp.com/turner/${props.value}`
useEffect(() => {
fetchData()
}, [])
const fetchData = () => {
fetch(url)
.then((res) => res.json())
.then((responce) => {
setData(responce);
})
}
return (
<div>
<h4> {props.value} </h4>
<h4> {url} </h4>
{data.map((item,i) => (
<>
<h3> {i} </h3>
<h3> {item.Question} </h3>
<h5> {item.Option1} </h5>
<h5> {item.Option2} </h5>
<h5> {item.Option3} </h5>
<h5> {item.Option4} </h5>
</>
))}
</div>
)
}
export default MainQuiz
I press ctrl+s in page 2 for fetch.
My problem is I cant fetch api directly. for fetch i need to choose option than come back to my code and press ctrl+s then it fetch the api i choose but i need is when i choose it directy show data of apis
here is the some images
after choosing
https://firebasestorage.googleapis.com/v0/b/trulyrockmusics.appspot.com/o/3.png?alt=media&token=a91f05f5-eff8-4f3b-aa53-324ed58f1c8e
after pressing ctrl+s
https://firebasestorage.googleapis.com/v0/b/trulyrockmusics.appspot.com/o/4.png?alt=media&token=7b7a9935-fa0c-4835-9c0f-705bc13ee124
Kindly give me a solution for this. thanks

Answer 1

Although your question is a bit hard to make sense of, my crystal ball is telling the issue is your data loading isn't aware of the value prop changing, since you compute url outside of the effect that actually loads the data.
Then, you'll need to make value a dependency of the effect, so when the value changes (when you change it in the select and pass it down to MainQuiz, the effect is re-run.
import React, {useEffect, useState} from 'react'
function MainQuiz({value}) {
const [data, setData] = useState(null);
useEffect(() => {
setData(null);
fetch(`https://quizstcapi.herokuapp.com/turner/${value}`)
.then((res) => res.json())
.then(setData);
}, [value]);
if (!data) return <>Loading...</>;
return (
<div>
{data.map(...)}
</div>
);
}