How do you swap a component with another after onclick event?-CodePudding

Below, I have a code that is eventually rendered as a route in a react, single page, app. What I was hoping to get, was that depending on what div was clicked, each applying a 'filter', that the component variable, will change components, based off what was imported.

import React from "react";
import { useState } from 'react';
import UpperLevel from "./UpperLevel";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridHome from "./GridHome";
import GridGym from "./GridGym";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";

const marginAuto = {
  margin: "auto"
};
const cursorPointer = {
  cursor: "pointer"
};
function ExercisesLauncher() {
  const component=<Grid/>;
  function applyCardio() {
  const component=<GridCardio/>
  }
  function applyGym() {
  alert( "GymClicked" );
  }
  function applyHome() {
  alert( "HomeClicked" );
  }
  function applyUpper() {
  alert( "UpperClicked" );
  }
  function applyLower() {
   alert( "LowerClicked" );
  }

  return (<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" onClick={applyGym} >
            <div style={cursorPointer} >
              <div >
                <h1 >Gym</h1>
              </div>
              <div >
                <p>You have equipment that is found at an ordinary gym.</p>
              </div>
            </div>
          </div>

          <div id="Home" onClick={applyHome} >
            <div style={cursorPointer} >
              <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" onClick={applyUpper} >
            <div style={cursorPointer} >
              <div >
                <h1 >Upper Body</h1>
                <p>
                  Includes the chest, arms, shoulders, and anything else above the waist.
                </p>
              </div>
            </div>
          </div>
          <div id="Lower" onClick={applyLower} >
            <div style={cursorPointer} >
              <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
          {component};
        </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>);
}

export default ExercisesLauncher;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

So far, I added alerts to make sure the server recognized these div elements being clicked, now, I just wish to apply the respective component to the body after a div is clicked. The main grid component does load where {component} is, which is perfect, I just do not know why the GridCardio component is not switching out the Grid component

CodePudding user response：

You're tripping up on the way you're using your component variable. You don't want to re-declare the variable, you just want to assign a new value

function ExercisesLauncher() {
   var component=<Grid/>;

   function applyCardio() {
       component=<GridCardio/>;
   }

   ...