props value is undefined

Question

This is my Home.js file which is the parent component

import React from 'react'
import "./Home.css"
import  { useState } from 'react'
import Quiz from './Quiz';
import {useNavigate} from 'react-router-dom';
export default function Home() {
    const [numQuestions, setNumQuestions] = useState(10);
    const [category, setCategory] = useState(9);
    const [difficulty, setDifficulty] = useState('easy');
    const [type, setType] = useState('multiple');
    const navigate= useNavigate();
    const [submitted, setSubmitted] = useState(false);
    const handleSubmit = (e) => {
        setSubmitted(true);
        console.log(numQuestions);
        console.log(category);
        console.log(difficulty);
        console.log(type);
        e.preventDefault();
       navigate('/quizz');
      };
  return (
    <>
     {submitted ? (<Quiz
    numQuestions={numQuestions} category={category} difficulty={difficulty} type={type}
 />):(<>
    <div className='intials'>
        <p>
            <h1 id='tophead'>Quizz Time</h1>
            Welcome to Quize time test your knowledge on various topics including sports,science,enviorment etc.
        </p>
    </div>
 <form  method="get" onSubmit={handleSubmit} className='form'>
    <div className='quiz'>
        Number of Question: <label htmlFor='noq'></label>
        <input type="number" name="noq" id="noq" min="5" max="20" value={numQuestions} onChange={(e) => setNumQuestions(e.target.value)} className='input'>
        </input>
    </div>
    <div className='quiz'>
    Select Category: <label htmlFor='category'></label>
        <select name='category'id='category' onChange={(e) => setCategory(e.target.value)} className='input'>
            <option value={category}>General Knowledge</option>
            <option value="10">Entertainment: Books</option>
            <option value="11">Entertainment: Film</option>
            <option value="12">Entertainment: Music</option>
            <option value="13">Entertainment: Musicals &amp; Theatres</option>
            <option value="14">Entertainment: Television</option>
            <option value="15">Entertainment: Video Games</option>
            <option value="16">Entertainment: Board Games</option>
            <option value="17">Science &amp; Nature</option>
            <option value="18">Science: Computers</option>
            <option value="19">Science: Mathematics</option>
            <option value="20">Mythology</option>
            <option value="21">Sports</option>
            <option value="22">Geography</option>
            <option value="23">History</option>
            <option value="24">Politics</option>
            <option value="25">Art</option>
            <option value="26">Celebrities</option>
            <option value="27">Animals</option>
            <option value="28">Vehicles</option>
            <option value="29">Entertainment: Comics</option>
            <option value="30">Science: Gadgets</option>
            <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
            <option value="32">Entertainment: Cartoon &amp; Animations</option>     
        </select>
    </div>
    <div className='quiz'>
    <label htmlFor="difficulty">Select Difficulty: </label>
    <select name="difficulty" className="input" onChange={(e) => setDifficulty(e.target.value)} id='difficulty'>
            <option value={difficulty}>Easy</option>
            <option value="medium">Medium</option>
            <option value="hard">Hard</option>
        </select>
    </div>
    <div className='quiz'>
    <label htmlFor="type">Select Type: </label>
    <select name="type" className="input" id='type' onChange={(e) => setType(e.target.value)}>>
            <option value={type}>Multiple Choice</option>
            <option value="boolean">True / False</option>
        </select>
    </div>
    <div className='quiz'>
        <button className="btn input" type="submit" >Generate Quiz</button>
        </div>
 </form>
 </>
      )}
</>
  );
}

This is my qizz.js file which is a subcomponent

import React, { useEffect } from 'react'
export default function Quiz(props) {
  const { numQuestions, category, difficulty, type } = props;
  useEffect(() => {
    fetch(`https://opentdb.com/api.php?amount=10`)
    .then((res) => {
      console.log("value=",numQuestions)
      console.log("value=",category)
      console.log("value=",difficulty)
      console.log("value=",type)
      console.log(res);
      return res.json();
    })
    .then((json) => {
      console.log(json);
      // Process the data here
    });
}, []);
  return (
    <div>
      <p>
        this is quizz{numQuestions}
      </p>
    </div>
  )
}

When I try to use the props value, it shows that the value is undefined, specifically console.log("value=",type) When I submit, there is no error message in the console either All the values ​​of are easy to see in the console but after passing them as props I don't know what is happening and why they are not showing the value when rendering the quiz page

Here is quiz{numQuestions } < /p> and displays "This is a quiz" but not {numQuestion}

Can anyone suggest me what to do

Answer 1

I generated a sandbox with your code and it is logging in the console.

Play it here: https://codesandbox .io/s/objective-marco-v23mkv?file=/src/App.js