Objects are not valid as a React child while setting hook after promise.all(responses)?

Question

I am trying to call 3 api's using promise.all() as per below code after completion of promises trying to update those responses to my state hook using useEffect

 import React from "react"; const [responses,setResponses] = React.useEffect([]) const filterResolveData = () => { const filterTypes = ["grade", "subject", "type"]; const promises = filterTypes.map((ele) => { return getFilterData(ele).catch((err) => console.log(err)); //api calls }); Promise.all(promises).then((response) => { console.log("allPromises", response); setFilterData(response); // Issue here tried using cloning but didn't work. }).catch((error) => console;log(`Error in executing ${error}`)); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>

Can anyone help me out where I am doing wrong

Answer 1

Issue lies on JSX (HTML) where we need to iterate over an array.

 grades.map((item, index) => { return ( <div key={index} className="subMenu" data-value={item.filterType} data-shows={item.filterValue} > <h6>{item.filterValue}</h6> //Instead I used {item} </div> );