Toggling between sections of a page in React js with CSS

Toggling between sections of a page in React js with CSS

Problem Description:

I’m building an app with React that displays/hides sections of a page when some buttons are clicked without changing the route. I’d prefer a shorter way of doing it since I’ll still do more of such in the later part of the app. Below is my implementation.

Below is my implementation.

import { useState } from "react";
import { Link } from "react-router-dom";

function Dashboard () {
    const [enrolled, setEnrolled] = useState('');
    const [favourite, setFavourite] = useState('none');
    const [recommended, setRecommended] = useState('none');
    const [profile, setProfile] = useState('none');
    const [changePassword, setChangePassword] = useState('none')



    const handleFavourite = () => {
        setFavourite('')
        setEnrolled('none')
        setRecommended('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleRecommended = () => {
        setRecommended('')
        setEnrolled('none')
        setFavourite('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleEnrolled = () => {
        setEnrolled('')
        setFavourite('none')
        setRecommended('none')
        setProfile('none')
        setChangePassword('none')
    }

    const handleProfile = () => {
        setProfile('')
        setFavourite('none')
        setRecommended('none')
        setEnrolled('none')
        setChangePassword('none')
    }

    const handleChangePassword = () => {
        setChangePassword('')
        setFavourite('none')
        setRecommended('none')
        setEnrolled('none')
        setProfile('none')
    }

    
    return (
        <div className="container mt-4">
            <div className="row">
                <aside className="col-md-3">
                    <div className="card">
                    <div className="list-group">
                        <h5 className="card-header">My Dashboard</h5>
                        <button id="enrolled" onClick={handleEnrolled} className="list-group-item list-group-item-action">Enrolled Courses</button>
                        <button id="favourite" onClick={handleFavourite} className="list-group-item list-group-item-action">My Favourite Courses</button>
                        <button id="recommended" onClick={handleRecommended} className="list-group-item list-group-item-action">Recommended Courses</button>
                        <button id="profile" onClick={handleProfile} className="list-group-item list-group-item-action">Profile Settings</button>
                        <button id="password" onClick={handleChangePassword} className="list-group-item list-group-item-action">Change password</button>
                        <Link style={{textDecoration: 'none'}} to="/user-login"><button className="list-group-item list-group-item-action text-danger">Logout</button></Link>
                    

Solution – 1

import {useState, useEffect} from 'react'

const sectionSwitch = ()=>{
  const [type, setType] = useState('type1')
  const handTypeChange = (type)=>{
  setType(type)
  }
  return <>
  <div onClick="()=>handTypeChange('type1')">Type1</div>
  <div onClick="()=>handTypeChange('type2')">Type2</div>
  <div class="page-container">
    {type=='type1' && <div class="type1Class">Type1Page</div>}
    {type=='type2' && <div class="type2Class">Type2Page</div>}
  </div>
  <>
}

export default sectionSwitch;