6 .Fetch Data

 .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 data .You can also use axios as shown above:

For that lets do it creating utility function:utils folder inside src folder:

then inide it create , fetchData.js ,then in that add:

export const exerciseOptions = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "process.env.REACT_APP_RAPID_API_KEY",
    "X-RapidAPI-Host": "exercisedb.p.rapidapi.com",
  },
};
export const fetchData = async (url, options) => {
  const response = await fetch(url, options);
  const data = await response.json();
  return data;
};

.We removed url from options because we will pass it as a parameter ot fetchData() manually so that we can fetch data for different urls using same fetchData() utils fuction.

A utility func is a func we can/ will reuse multiple times.

Now in searchExercise component add:

const [search, setSearch] = useState("");

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

  const [bodyParts, setBodyParts] = useState([]);

  useEffect(() => {

    const fetchExercisesData = async () => {

      const bodyPartsData = await fetchData(

        "https://exercisedb.p.rapidapi.com/exercises/bodyPartList",

        exerciseOptions

      );

      console.log(bodyPartsData);

      setBodyParts(["all", ...bodyPartsData]);

    };

    fetchExercisesData();

  }, []);

  const handleSearch = async () => {

    if (search) {

      const exercisesData = await fetchData(

        "https://exercisedb.p.rapidapi.com/exercises",

        exerciseOptions

      );

      console.log(exercisesData);

      const searchedExercise = exercisesData.filter(

        (exercise) =>

          exercise.name.toLowerCase().includes(search) ||

          exercise.equipment.toLowerCase().includes(search) ||

          exercise.bodyPart.toLowerCase().includes(search) ||

          exercise.target.toLowerCase().includes(search)

      );

      setSearch("");

      setExercises(searchedExercise);

    }

  };

.INside useEffect we fetched bodyParts/categories, and we want to fetch at start/rendering of comp only once(so no dependency).Then fetched data stored to bodyParts state.

But we want to fetch data only when user click search button so used onclick event with handleSearch func inside which we fetched whole exercises(1000s of exercises).also we want ot only fetch only when user enters something in search so if(search){fetch}

.console to see what is fetched.

and whats inside, we can see:there are body parts.equipment,name,etc.

so we filtered fetched data on basis of what user can search...as user can search name,or,equipment,0r,bodypart,or target and set that filtered array to a state.

setSearch(""); This watch used ot empty the search bar when data is fetched.as

value of textfield is set to search state.

Now we just need to use this states to display those data in UI.

.

.

.

.

.