Uncaught (in promise) TypeError: setExercises is not a function-CodePudding

I am making an Recat gym website using an API, in this when I search for something it gets the data and shows the error ie., the data is not passing to setExercise for displaying it to screen. this is the function given for searching onClick={handlesearch}:

const SearchExercises = (setExercises) => {

const handleSearch= async()=>{
            if(search){
                const exerciseData = await fetchData('https://exercisedb.p.rapidapi.com/exercises', exerciseOptions);
                const SearchExercises = exerciseData.filter((exercise)=>
                    exercise.name.toLowerCase().includes(search));
                setSearch('');
                setExercises(SearchExercises);
            }
        }
}

The useState is defined in the home.js file

function Home() {
  const [bodyPart,setBodyPart] = useState('all')
  const [exercises, setExercises] = useState([])
  return (
    <Box><SearchExercises setExercises={setExercises} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
    </Box>
  )
}

CodePudding user response：

When you're passing props to a React component, the first argument contains all of your props. The common pattern is to destructure them like so

const SearchExercises = ({ setExercises, bodyPart, setBodyPart }) => {

CodePudding user response：

You should receive props like this.

const SearchExercises = ({setExercises}) => {

...