Question 73308 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how to call a component by onclick in react – Reactjs

Hi guys I am trying to call my child component: MakeQuizePage in my parent component: ‘StartPage’
but not works my code :

 import MakeQuizePage from './makeQuizePage';

function StartPage() {
    return (
        <>
            <h1 className=" my-5   fs-1 text-danger text-center  ">کی از همه خبیث تره</h1>  ;
            <div className="my-5 text-center">
                <button onClick={nextPage} className="shadow btn  p-4 btn-lg col-3 text-center">start  </button>
            </div>
        </>
    )
    function nextPage() {
        return (<MakeQuizePage />)
    }
}
export default StartPage;


 and this is my child component: MakeQuizePage (jsx)

import { useState } from "react";
const MakeQuizePage = () => {
    const [pageCount, setPageCount] = useState(0);
    const questionAndRezults = [
        [
            'asa'
        ],
        [
            'akks'
        ]
    ];

    return (
        <>
            <p className='text-center'>{questionAndRezults[pageCount][0]}</p>
            {questionAndRezults[pageCount].slice(1).map((p, index) => (
                <>
                    <p className='text-center'>{questionAndRezults[pageCount].slice(1)[index]}</p>
                    <button className="form-check-input" type="radio"></button>
                </>
            ))}
        </>
    )
    const nextPageMaker = function nextPage() {
        setPageCount(
            pageCount + 1);
        console.log(pageCount)
    }
}
export default MakeQuizePage;


///when I tested by a simple function this onclick work, but not working by Codes above
Tags:

4

Answers


  1. 0

    You said your file is MakeQuizePage.jsx . and your importing

    import MakeQuizePage from './makeQuizePage';

    if your folder is MakeQuizePage.jsx try importing like this

    import MakeQuizePage from './MakeQuizePage';

    the error is in folder name.
    you can check the also check what is the error in your browser console

    Login or Signup to reply.
  2. 0

    It depends on your product requirements

    1. You want MakeQuizePage to be an independent page with its own URL that people can directly access it

    OR

    1. MakeQuizePage and StartPage share the same URL

    For #1, you should consider using React Router or NextJS as they provide you a routing mechanism for pages with different URLs

    For #2, the onClick callback should control what is visible instead of returning MakeQuizePage

    A high level code could look like this

    import { useState } from 'react';
import MakeQuizePage from './makeQuizePage';

function StartPage() {
  // useState to create a visibility flag
  const [isQuizePageVisible, setIsQuizePageVisible] = useState(false)

  const onClickHandler = () => {
    // Set the visibility flag to true when the button is clicked
    setIsQuizePageVisible(true)
  }

  return (
    <>
      <h1 className=" my-5   fs-1 text-danger text-center  ">کی از همه خبیث تره</h1>  ;
      <div className="my-5 text-center">
        {/* When button is clicked, call the `onClickHandler` defined above */}
        <button onClick={onClickHandler} className="shadow btn  p-4 btn-lg col-3 text-center">start  </button>

        {/* When the flag is true, the page will be shown */}
        {isQuizePageVisible && <MakeQuizePage />}
      </div>
    </>
  )
}

export default StartPage;
    Login or Signup to reply.
  3. 0

    If you want the nextPage nested in the StartPage component,you can use display to control the visiability of the nextPage,like below:

    
import { useState } from "react";
import MakeQuizePage from "./makeQuizePage";

function StartPage() {
  const [nextPageView, setnextPageVeiw] = useState("none");
  return (
    <>
      <h1 className=" my-5   fs-1 text-danger text-center  ">
        کی از همه خبیث تره
      </h1>{" "}
      ;
      <div className="my-5 text-center">
        <button
          onClick={nextPage}
          className="shadow btn  p-4 btn-lg col-3 text-center"
        >
          start{" "}
        </button>
        <div style={{ display: nextPageView }}>
          <MakeQuizePage />
        </div>
      </div>
    </>
  );
  function nextPage() {
    return setnextPageVeiw("block");
  }
}
export default StartPage;

    If you only want to jump to next page and replace startpage,you can do the follwing:
    npm install [email protected];

    // in App.js
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import StartPage from "./StartPage";
import MakeQuizePage from "./MakeQuizePage";

import "./styles.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <StartPage />
  },
  {
    path: "next",
    element: <MakeQuizePage />
  }
]);

const App = () => <RouterProvider router={router} />;

export default App;


    // in StartPage.js
import { useState } from "react";
import { Navigate } from "react-router-dom";
import MakeQuizePage from "./MakeQuizePage";

function StartPage() {
  const [nextPageView, setNextPageVeiw] = useState("none");
  return (
    <>
      <p>startpage</p>
      <h1 className=" my-5   fs-1 text-danger text-center  ">
        کی از همه خبیث تره
      </h1>{" "}
      ;
      <div className="my-5 text-center">
        <button
          onClick={nextPage}
          className="shadow btn  p-4 btn-lg col-3 text-center"
        >
          start{" "}
        </button>
      </div>
      {/* <div style={{ display: nextPageView }}>
        <MakeQuizePage />
      </div> */}
      {nextPageView === "block" && <Navigate to="next" replace={true} />}
    </>
  );
  function nextPage() {
    const nextState = nextPageView === "none" ? "block" : "none";
    return setNextPageVeiw(nextState);
  }
}
export default StartPage;

    Here is a demo containing the code above

    Login or Signup to reply.
  4. 0

    You can achieve your goal using setState, here is a snippet of the Parent Component Code:

    import React from 'react';
import MakeQuizePage from './MakeQuizePage';
function StartPage() {
  const [showMakeQuiz, setShowMakeQuiz] = React.useState(false);

  function handleClick() {
    setShowMakeQuiz(true);
  }

  return (
    <div>
      <h1>Welcome to the Start Page</h1>
      <button onClick={handleClick}>Start Quiz</button>
      {showMakeQuiz && <MakeQuizePage />}
    </div>
  );
}

export default StartPage;

    This way whenever user click the button the child component will be displayed.
    Hope this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search