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

user_10283072 0
Viewed 34

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

reactjs javascript
1 Answers

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>
  );

user_102830720
Related