i have a function that´s supposed to fetch some questions.

in my App.js file i have this code :

import axios from "axios";
import { useState } from "react";
import { BrowserRouter, Route, Routes} from "react-router-dom";
import "./App.css";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import Result from "./Pages/Result/Result";

function App() {
  const [questions, setQuestions] = useState();
  const [name, setName] = useState();
  const [score, setScore] = useState(0);

  const fetchQuestions = async (category = "", difficulty = "") => {
    const { data } = await axios.get(
      `https://opentdb.com/api.php?amount=10${
        category && `&category=${category}`
      }${difficulty && `&difficulty=${difficulty}`}&type=multiple`
    );

    setQuestions(data.results);
  };

  return (
    <BrowserRouter>
      <div className="app" style={{ backgroundImage: 'url("/quizi.jpg")' }}>
        <Header />
        <Routes>
          <Route path="/" element={<Home/>}>

              name={name}
              setName={setName}
              fetchQuestions={fetchQuestions}
           
          </Route>
          <Route path="/quiz" element={<Quiz/>}>
              name={name}
              questions={questions}
              score={score}
              setScore={setScore}
              setQuestions={setQuestions}
            
          </Route>
          <Route path="/result" element={<Result/>}>
            name={name} score={score} 
          </Route>
          </Routes>
      
      </div>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

and in my Home component:

import { Button, MenuItem, TextField } from "@material-ui/core";
import { useState } from "react";
import { useNavigate } from "react-router-dom/dist";
import ErrorMessage from "../../components/ErrorMessage/ErrorMessage";
import Categories from "../../Data/Categories";
import "./Home.css";

const Home = ({fetchQuestions}) => {
  const [category, setCategory] = useState("");
  const [difficulty, setDifficulty] = useState("");
  const [error, setError] = useState(false);
  const [name, setName] = useState("");

  const navigate = useNavigate();

  const handleSubmit = () => {
    if (!category || !difficulty || !name) {
      setError(true);
      return;
    } else {
      setError(false);
      fetchQuestions(category, difficulty);
      navigate("/quiz");
    }
  };
  console.log(fetchQuestions)

  return (
    <div className="content">
      <div className="settings">
        <span style={{ fontSize: 30 }}>Quiz Settings</span>
        <div className="settings__select">
          {error && <ErrorMessage>Please Fill all the feilds</ErrorMessage>}
          <TextField
            style={{ marginBottom: 25 }}
            label="Enter Your Name"
            variant="outlined"
            onChange={(e) => setName(e.target.value)}
          />
          <TextField
            select
            label="Select Category"
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            variant="outlined"
            style={{ marginBottom: 30 }}
          >
            {Categories.map((cat) => (
              <MenuItem key={cat.category} value={cat.value}>
                {cat.category}
              </MenuItem>
            ))}
          </TextField>
          <TextField
            select
            label="Select Difficulty"
            value={difficulty}
            onChange={(e) => setDifficulty(e.target.value)}
            variant="outlined"
            style={{ marginBottom: 30 }}
          >
            <MenuItem key="Easy" value="easy">
              Easy
            </MenuItem>
            <MenuItem key="Medium" value="medium">
              Medium
            </MenuItem>
            <MenuItem key="Hard" value="hard">
              Hard
            </MenuItem>
          </TextField>
          <Button
            variant="contained"
            color="primary"
            size="large"
            onClick={handleSubmit}
          >
            Start Quiz
          </Button>
        </div>
      </div>
      <img src="/gcat.jpg" className="banner" alt="quiz app" />
    </div>
  );
};

export default Home;

When i submit my form nothing happens and in my console i can read "fetchQuestions is not a function"

I have tried to solved the problem but i'm stuck..

i expected the app to redirect to (/quiz) and show the fetched questions after form submit. I tried to import the function from App.js (did not work)

CodePudding user response：

You're passing the function to the route:

<Route path="/" element={<Home/>}>
      name={name}
      setName={setName}
      fetchQuestions={fetchQuestions}
</Route>

But you need to pass it to the <home /> component, so change it to:

<Route path="/" element={<Home setName={setName} name={name} fetchQuestions={fetchQuestions} />} />

Same goes for the name and setName