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

CodePudding user response：

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>
  );
}