I have questions similar to this on my profile, but now am aiming to be specific, below I have code that populates an html file, using routes to "switch pages" or components, labeled as Apps. The main component I am trying to alter is App2, which contains a grid of exercises, and has repeating divs with their own id's to filter out exercises. However, on div click, I want to populate the root div with a grid (into the component value) component that represents the div you click. For example, clicking Gym div only shows gym exercises, etc. My grids all the right exercises to display, It is just a matter of swapping the default one out (component) with the filtered ones.
import { render } from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App1 from "./App1";
import App2 from "./App2";
import App3 from "./App3";
const rootElement = document.getElementById("page");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App1 />} />
<Route path="Exercises" element={<App2 />} />
<Route path="Scheduler" element={<App3 />} />
</Routes>
</BrowserRouter>,
rootElement
);import React from "react";
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
function App2(){
let component = <Grid/>;
function applyHome(){
//also applyUpper/Gym/Home/...
component = <GridHome/>
}
return(
<div id="Home/Upper/Cardio/Gym" >
<div style={cursorPointer} onClick={applyHome/Gym/Upper/Cardio...} >
<div >
<h1 >At Home</h1>
</div>
<div >
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
<section>
<div >
<div id="root" >
{/* THIS WILL CHANGE BASED ON CLICKS */}
{component}
</div>
</div>
</section>
);
}
I know clicking the div's work, as I used an alert prior to see if the server would respond to clicks, however, the component does not change, and the original (or component value) stays the same.
CodePudding user response：
You need to rerender after the click by saving the current component. Just changing the variable value does not trigger a rerender because jsx doe snot actually render anything but creates objects that react will display on render. And save the current selection in a state.
Try this:
function App2(){
const [display, setDisplay] = React.useState("grid");
let component = <Grid/>;
switch(display) {
case "home":
component = <GridHome/>
break;
// Fill in the rest
}
function applyHome(){
setDisplay("home") // or other tags that you want to check with the switch
}
CodePudding user response：
I actually came up with an answer that was a lot easier than I anticipated. All I did was use a hook! On click, these functions are called and everything works as intended.
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section id="title">
<div >
<div >
<div >
<h1 >Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 >Group</h2>
<div style={marginAuto}>
<div id="Gym" >
<div style={cursorPointer} onClick={applyGym} >
<div >
<h1 >Gym</h1>
</div>
<div >
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" >
<div style={cursorPointer} onClick={applyHome} >
<div >
<h1 >At Home</h1>
</div>
<div >
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 >Equipment</h2>
<div style={marginAuto}>
<div id="Upper" >
<div style={cursorPointer} onClick={applyUpper} >
<div >
<h1 >Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" >
<div style={cursorPointer} onClick={applyLower} >
<div >
<h1 >Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} >
<div style={cursorPointer} >
<div >
<h1 >Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div >
<div id="root" >
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div >
<a href="index.html">
{" "}
<img src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;