How do I use Promise.all results in a React component?

Question

I need to figure out how to fetch multiple GeoJSON files from my public folder and render the coordinates in a React component. Here is the relevant code snippet:

export const CoordinatesComponent = () => {
  const [data, setData]: any = useState([]);
  const [isLoading, setLoading] = useState(true);
    
  useEffect(() => {
    let isMounted = true;
    const dataPromises = Promise.all([
      fetch("data/boundary.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
      fetch("data/neighborhoods.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
    ])
    .then((response) => response.map((a) => a.json()));
    
    const setState = () => {
      if (isMounted) {
        dataPromises.then((a) => setData(a));
        setLoading(false);
      }
      return () => {
        isMounted = false;
      };
    };
    
    setState();
    
  }, []);
    
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <div>{data}</div> // Just a placeholder.  This array of geoJson objects would be fed into another component
  );
};

While I can do this with a single fetch operation, I am stuggling with getting this to work with Promise.all. When I console.log the data variable I'm seeing an array of undefined objects. Any help would be greatly appreciated!

Answer 1

The issue is with the following then block. Since you have an array of promises now again getting JSON from responses will be the same problem and you need to return the res.json() promises in a Promise.all call.

then((response) => response.map((a) => a.json()));

It should be corrected like below.

then((responses) => Promise.all(responses.map((res) => res.json())));