src property must be a valid json object while waiting for Promise to resolve

[Claim0013]

Hey guys!

I found this issue but it didn't help at all -> https://github.com/mac-s-g/react-json-view/issues/181

I am passing a fetched json to the src property and apparently the viewer isn't waiting for the promise to resolve and throws the exception instantly.

export const fetchJsonByURL = (url) => {
  return axios.get(url)
    .then((res) => res.data)
    .catch((error) => {
      toast.error(`${error.message} at getting ${url}`);
      return null;
   });
};

The promise resolves right after the error. If I directly pass a json object to src, it works. I use an async/await method and pass it down to the component as such: <ReactJson src={getSrc()} collapseStringsAfterLength={40} ... />

Any tips?

[nathanwaters]

This works for me. Just adapt to suit axios...

  const [loading, setLoading] = useState(true);
  const [JSON, setJSON] = useState([]);

  useEffect(() => {
      fetch(url).then(async (x) => {
        const data = await x.json()
        setJSON(data)
        setLoading(false);
      });
  }, []);

  return loading ? <div /> : <ReactJson src={JSON} />;