traying to render data from api to take user input form

[MahipalSinghBarva]

// eleven lines of comments

import React from 'react'

const ResultWorkout = ({ resultWorkout }) => {
return (

Please find your Workout Plan

    <div className="resultplan">
        {resultWorkout.map((exercise, index) =>(
           <div key={index} className='datamainpage'>
            <div>
                <h3>Name:{exercise.name}</h3>
                <p>Type:{exercise.type}</p>
                <p>Muscle:{exercise.muscle}</p>
                <p>Equipment: {exercise.equipment}</p>
                <p>Difficulty:{exercise.difficulty}</p>
                <p>instructions: {exercise.instructions}</p>
            </div>
           </div>
        ))}
    </div>
  </div>
</div>

)
}

ResultWorkout.defaultProps = {
resultWorkout: [],
};
export default ResultWorkout

import axios from "axios";

// export const httpGetUsersCall = async () => {
// await axios
// .get('https://exercisedb.p.rapidapi.com/exercises' ,{
// headers: {
// 'X-RapidAPI-Key': 'f00913b764msh262ba1e66b0809bp123ab1jsnedf0ba8711e4',
// 'X-RapidAPI-Host': 'exercisedb.p.rapidapi.com',
// // contentType: "application/json"
// }

// })
// .then((result) => {
// console.log(result);
// return;
// })
// .catch((error) => {
// console.log(error);
// return;
// });
// };

import React, { useEffect, useState } from "react";
import "./PersonalizedWorkout.css";
import{httpGetUsersCall} from '../../api/api'
import ResultWorkout from "./resultworkout";

const Loader = () =>{
return (

Please wait till generate workout plan

)
}

const PersonalizedWorkout = () => {

const [workOutPlan, setWorkOutPlan] = useState({age:"", gender:"", muscle:"", workoutDuration:"", equipment:"", fitnessLevel:""})
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false)

// useEffect(()=>{
// if(workOutPlan){
// setData(workOutPlan)
// }
// },[workOutPlan])

const onChange = (e) =>{
const {name, value} = e.target
console.log("name",name, "value",value)
setWorkOutPlan({...workOutPlan, [name]:value})

}
const handleSubmit = async (e) => {
e.preventDefault();
console.log(setWorkOutPlan)
setWorkOutPlan([])
// setLoading(false)
try{
const workOutData = await httpGetUsersCall(workOutPlan);
const dataArray = Object.values(workOutData);
setData(dataArray)
// setData(workOutPlan)
setLoading(false)

console.log(workOutData)
// setWorkoutPlan(workOutData)

}catch (error){
console.error('Error featching data', error)
}

// generateWorkoutPlan(workOutPlan);

};

if (loading) {
return ;
}

if (data !== null){
return
}

// console.log(workOutPlan)
// const {age, gender, muscle, workoutDuration, equipment, fitnessLevel} = workOutPlan

return (

Personalized Workout Recommendations

Please fill the input

  <div className="inputform">
    <form className="inputform"  onSubmit={handleSubmit}>
      <div className="agetomuscle">

        <label>
          <span className="titlename">Age:</span> <br />
          <input type="number" placeholder="age..." name={'age'} onChange={onChange}/>
        </label>
        <br />

        <label>
          <span className="titlename">Gender:</span> <br />
          <input type="text" placeholder="gender..." name={'gender'} onChange={onChange}/>
        </label>
        <br />

        <label>
          <span className="titlename">Target Muscle:</span> <br />
          <input type="text" placeholder=" target muscle groups..." name={"targetmuscle"} onChange={onChange}/>
        </label>
      </div>

      <div className="durationtofitness">
        <label>
          <span className="titlename">Workout duration:</span>
          <br />
          <input type="text" placeholder="workout duration..." name={"workoutduration"} onChange={onChange} />
        </label>
        <br />

        <label>
          <span className="titlename">Equipment:</span>
          <br />
        </label>

        <select id="Equipment" name={"equipmenttype"} onChange={onChange}>
          <option value="Advance">Advance</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Beginner">Beginner</option>
        </select>

        <label>
          <br />
          <span className="titlename">Fitness Level:</span> <br />
          
        </label>

        <select id="FitnessLevel" name={"Fitness Level"}  onChange={onChange}>
          <option value="Sedentary">Sedentary</option>
          <option value="LightlyActive">Lightly Active</option>
          <option value="VeryActive">Very Active</option>
        </select>
        
      </div>
      <div className="submitbutton">
        <button type="submit" >Submit & Generate Workout Plan</button>
      </div>
      </form>
      
  </div>
  
</div>

);
};

export default PersonalizedWorkout;

export const httpGetUsersCall = async () =>{
await axios
.get('https://exercises-by-api-ninjas.p.rapidapi.com/v1/exercises' ,{

headers: {
  'X-RapidAPI-Key': 'f00913b764msh262ba1e66b0809bp123ab1jsnedf0ba8711e4',
  'X-RapidAPI-Host': 'exercises-by-api-ninjas.p.rapidapi.com',
  contentType: "application/json"
}
  
})
.then((result) => {
  console.log(result);
  return ;
})
.catch((error) => {
  console.log(error);
  return ;
});

}