Gym website using react

.    in exerxises.jsx file :Add     useEffect (() => {     const fetchExercisesData = async () => {       let exercisesData = [];       if ( bodyPart === "all" ) {         exercisesData = await fetchData (           "https://exercisedb.p.rapidapi.com/exercises" ,           exerciseOptions         );       } else {         exercisesData = await fetchData (           `https://exercisedb.p.rapidapi.com/exercises/bodyPart/ ${ bodyPart } ` ,           exerciseOptions         );       }       setExercises ( exercisesData );     };     fetchExercisesData ();   }, [ bodyPart ]); .We have prop drilled and setbodypart to an item such as waist ,legs ,etc on clicking o...

 . import React , { useState , useEffect } from "react" ; import { Pagination } from "@mui/material" ; import { Box , Stack , Typography } from "@mui/material" ; import { exerciseOptions , fetchData } from "../../utils/fetchData" ; import ExerciseCard from "../ExerciseCard/ExerciseCard" ; const Exercises = ({ exercises , setExercises , bodyPart }) => {   // console.log(exercises); // only appear when you serach something   const [ currentPage , setCurrentPage ] = useState ( 1 );   const exercisesPerPage = 9 ;   const indexOfLastExercise = currentPage * exercisesPerPage ;   const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage ;   const currentExercises = exercises . slice (     indexOfFirstExercise ,     indexOfLastExercise   );   const paginate = ( e , value ) => {     setCurrentPage ( value );     window . scrollTo ({ top : "1800px" , behavior : "...

  import React from "react" ; import { Link } from "react-router-dom" ; import { Stack , Typography , Button } from "@mui/material" ; const ExerciseCard = ({ exercise }) => {   // console.log(exercise); // only appear when you serach something eg:back   return (     < Link className = "exercise-card" to = { `/exercise/ ${ exercise . id } ` } >       < img src = { exercise . gifUrl } alt = { exercise . name } loading = "lazy" />       < Stack flexDirection = "row" >         < Button           sx = { {             ml : "21px" ,             color : "#fff" ,             backgroundColor : "#ffa9a9" ,             fontSize : "14px" ,             borderRadius : "20px" ,         ...

. import React from "react" ; import { Stack , Typography } from "@mui/material" ; import Icon from "../../assets/icons/gym.png" ; const BodyPart = ({ item , bodyPart , setBodyPart }) => {   return (     < Stack       type = "button"       alignItems = "center"       justifyContent = "center"       spacing = { 4.7 }       className = "bodyPart-card"       sx = { {         borderTop : bodyPart === item ? "4px solid #ff2625" : "" ,         backgroundColor : "#fff" ,         borderBottomLeftRadius : "20px" ,         width : "270px" ,         height : "280px" ,         cursor : "pointer" ,         boxShadow : "0 0 25px rgba(0,0,0,0.2)" ,       } }       onClick = { () => {     ...

 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 }     ...

 .To fetch data for rapid api, we will use api provided by exercisedb of rapid api. so search exercisedb in rapid api, click on test endpoints , login , subscribe freee version(500 request per month allowed), then click subscribe. Then you will see something like this:(instruction to use it): const axios = require ( "axios" ) ; const options = { method : 'GET' , url : 'https://exercisedb.p.rapidapi.com/exercises/bodyPartList' , headers : { 'X-RapidAPI-Key' : 'API_KEY' , 'X-RapidAPI-Host' : 'exercisedb.p.rapidapi.com' } } ; axios . request ( options ) . then ( function ( response ) { console . log ( response . data ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; Here i removed my api key for security reason.USe your api key instead of API_KEY. (Dont forget to restart react app if u used .env file to store the api key) Now we will use fetch() to fetch the dat...

 ....Here is how you make UI.Later we will fetch data for this section. import React , { useState , useEffect } from "react" ; import { Box , Typography , Stack , TextField , Button } from "@mui/material" ; const SearchExercises = () => {   return (     < Stack justifyContent = "center" alignItems = "center" mt = "37px" p = "20px" >       < Typography         fontWeight = { 700 }         sx = { { fontSize : { lg : "44px" , xs : "30px" } } }         mb = "50px"         textAlign = "center"       >         Awesome Exercises You < br />         Should Know       </ Typography >       < Box position = "relative" mb = "72px" >         < TextField           sx = { {         ...