7. Horizontal Scroll bar

 First lets do prop drilling (of course u can use context api but for now lets use props only):

in home.jsx

.import React, { useState } from "react";

import { Box } from "@mui/material";

import HeroBanner from "../../components/HeroBanner/HeroBanner";

import SearchExercises from "../../components/SearchExercises/SearchExercises";

import Exercises from "../../components/Exercises/Exercises";

const Home = () => {

  const [bodyPart, setBodyPart] = useState("all");

  const [exercises, setExercises] = useState([]);

  return (

    <Box>

      <HeroBanner />

      <SearchExercises

        bodyPart={bodyPart}

        setExercises={setExercises}

        setBodyPart={setBodyPart}

      />

      <Exercises

        bodyPart={bodyPart}

        setExercises={setExercises}

        setBodyPart={setBodyPart}

      />

    </Box>

  );

};

export default Home;

.Because we need same datas in Exercises and SearchExercises

.IN SearchExercises componenta add:

import HorizontalScrollBar from "../HorizontalScroolBar/HorizontalScrollBar";

....Inside <stack>......

<Box sx={{ position: "relative", width: "100%", p: "20px" }}>

        <HorizontalScrollBar

          data={bodyParts}

          bodyPart={bodyPart}

          setBodyPart={setBodyPart}

        />

      </Box>

.InHorizontalScrollbar component,(need to use react-horizontal-scrolling-menu of 2.7.1 version),,

import React, { useContext } from "react";

import { Box, Typography } from "@mui/material";

import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";

import BodyPart from "../BodyPart/BodyPart";

import LeftArrowIcon from "../../assets/icons/left-arrow.png";

import RightArrowIcon from "../../assets/icons/right-arrow.png";

const LeftArrow = () => {

  const { scrollPrev } = useContext(VisibilityContext);

  return (

    <Typography onClick={() => scrollPrev()} className="right-arrow">

      <img src={LeftArrowIcon} alt="left-arrow" />

    </Typography>

  );

};

const RightArrow = () => {

  const { scrollNext } = useContext(VisibilityContext);

  return (

    <Typography onClick={() => scrollNext()} className="left-arrow">

      <img src={RightArrowIcon} alt="right-arrow" />

    </Typography>

  );

};

const HorizontalScrollBar = ({ data, bodyPart, setBodyPart }) => {

  return (

          <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>

        {data.map((item) => (

          <Box

            key={item.id || item}

            itemId={item.id || item}

            title={item.id || item}

            m="0 40px"

          >

            {/* {item} */}

            <BodyPart

              item={item}

              bodyPart={bodyPart}

              setBodyPart={setBodyPart}

            />

          </Box>

        ))}

      </ScrollMenu>

     

  );

};

export default HorizontalScrollBar;

. key={item.id || item}

.for now item.id would work as it contain id but later we are going to use this same component in other page as well at that time item.id wont be available at that time ie, when item.id is false , item is executed as key.