How to set useState for change view on reactJs-CodePudding

Now I'm trying to learn React and how to build a single Page application without a redirect page. so every change UI will just trigger by the button. However, I'm struggling with how to implement it if the trigger button is on another view...

I build a simple code to change the route view from <Home/> to <Payment/> with a button.

app.js

import React, {useState, useEffect} from 'react'; 

import Home from './views/Home';
import Payment from './views/Payment'; 
import Header from './components/Header';
import Footer from './components/Footer';

function App(props) {  

    const [changePage, setPage] = useState(false);
  
    useEffect(() => {
      console.log(changePage);
      if (changePage) {
        setPage(true);
      }
    } );
  
    const handleClick = () => setPage(true);
   
  return ( 
      <div>
        <Header/>
          <button onClick={!changePage ? handleClick : null} >
            Goto Payment
          </button>

          {changePage ? <Payment/> : <Home/>}

        <Footer/>      
      </div>
 
  );
}

export default App;

The above code can work when clicking the button. However, I plan to move the trigger button from app.js to ./view/Home, so the code on ./view/home I set with this code

import React from 'react'; 

function Home(props) {
    return (
        <div>
            HOME

            <button onClick={!changePage ? handleClick : null} >
            Goto Payment
          </button>
        </div>
        
    );
}

export default Home;

but it returns an error

Compiled with problems:X

ERROR


src/views/Home.js
  Line 8:31:  'changePage' is not defined   no-undef
  Line 8:44:  'handleClick' is not defined  no-undef

Search for the keywords to learn more about each error.

From my code, how do I able to set the trigger button on file ./view/Home but still change the page on app.js...

please help

CodePudding user response：

You called Home from APP but you didn't send any props. Send props that show undefined in console and destructure it from Home Component.

CodePudding user response：

handleClick and changePage not available Home file, you need to pass props to Home Component. (changePage is not required as it is always false to Home)

pass prop

{changePage ? <Payment/> : <Home handleClick={handleClick} />}

Use prop handleClick

<div>
    HOME

    <button onClick={prop.handleClick} >
    Goto Payment
  </button>
</div>

CodePudding user response：

I highly encourage you to look into the React Router version 6. You are render the children component with nested routes.

You can pass any child component to be rendered:

function App() {
  return (
    <Routes>
      <Route path="Home" element={<Home />}>
        <Route path=index element={<Home />} />
        <Route path=":id"element={<Payment />} />
      </Route>
    </Routes>
  );
}

And inside the Home component you can use the Outlet as the placeholder Which will be replaced by the component you passed. And use useNavigate hooks to toggle the child component

https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

CodePudding user response：

Actually for that purpose you don't need all that codes. take off useState and useEffect. simply use useNavigate and run this code as below for Home to Pyment

import React from 'react';

import { useNavigate } from "react-router-dom";

function Home(props) {

const navigate = useNavigate(); return ( HOME

        <button onClick={() => {
                  navigate(`/views/Payment`);
                }} >
        Goto Payment
      </button>
    </div>
    
);

}

export default Home;

CodePudding user response：

you can pass it using props like this

import React from 'react'; 

function Home({ setPage , changePage }) {
return (
    <div>
        HOME

        <button onClick={()=>{setpage( ()=>!changePage )}} >
        Goto Payment
      </button>
    </div>
    
);

}

export default Home;

and in the app component you should add:

{changePage ? <Payment/> : <Home setPage = {setPage} changePage = {changePage} />}

this will cause the component to render, and you shod be good to go.