My Component isn't conditionally rendering properly-CodePudding

I have a simple react page so far where I just have a home component which seems to work fine it is made up from the code I have included what I am trying to do is to render another component the main component when the button that is part of the home component is clicked but it keeps giving me the error and I have no idea what I am doing wrong in this case I have included code for all of my files the main component isn't fully finished right now it was just to test what I am currently doing that I added a paragraph placeholder any help is appreciated thanks

Error: Unknown error (/node_modules/react-dom/cjs/react-dom.development.js:3994) !The above error occurred in the component: at Main (exe1.bundle.js:94:3) at div at App (exe1.bundle.js:31:52) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. !Error: Unknown error

Home Component:

import React from "react";


export default function Home(props) {



    return (
        <main className="home-main">
            <div className="content-container">

                <div className="bottom-corner">
                </div>
                <div className="top-corner"> 
                </div>
                <h1 className="home-heading">Quizzical</h1>
                <p className="home-description">Some description if needed</p>
                <button 
                className="start-button"
                onClick={props.handleClick}
                >Start quiz
                </button>
            </div>
        </main>
    )
}

Main Component:

import react from "react";


export default function Main() {
    return (
       
            <h1>hello </h1>
       
    )
}

App:

import React from "react";
import Main from "./components/Main"
import Home from "./components/Home"

export default function App() {
    
    const [startQuiz, setStartQuiz] = React.useState(false);

    function clickStart() {
        // flip the state on each click of the button 
        console.log(startQuiz);
        setStartQuiz(prevState => !prevState);
        
        
    }
    
    return (
    
        <div>
        {console.log("start", startQuiz)}
        {startQuiz ?  
            <Main />
         : 
            <Home handleClick={clickStart}/> }
        }      
        </div>
    )
}

Index:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"))

CodePudding user response：

I think you just have a typo here

import react from "react";

should be

import React from "react";

CodePudding user response：

You can try changing your setStartQuiz to just simply negate the current startQuiz value instead of using prevState.

function clickStart() {
  // flip the state on each click of the button 
  console.log(startQuiz);
  setStartQuiz(!startQuiz);
}

CodePudding user response：

Here's a working example based on your code.
code sandbox

import React, { useState } from "react";

const Main = () => <h1>hello </h1>;

const Home = (props) => {
  return (
    <main className="home-main">
      <div className="content-container">
        <div className="bottom-corner"></div>
        <div className="top-corner"></div>
        <h1 className="home-heading">Quizzical</h1>
        <p className="home-description">Some description if needed</p>
        <button className="start-button" onClick={props.handleClick}>
          Start quiz
        </button>
      </div>
    </main>
  );
};

export default function App() {
  const [startQuiz, setStartQuiz] = useState(false);

  return (
    <div>
      {startQuiz && <Main />}
      {!startQuiz && <Home handleClick={() => setStartQuiz(true)} />}
    </div>
  );
}