JSON data from S3 text file using React

Question

I'm trying to get JSON data from an s3 bucket using React (in a Gatsby project).

This is my code.

import React from 'react';


function getJson() {
    return fetch("http://secstat.info/testthechartdata.json")
    .then((response) => response.json())
    .then((responseJson) => {
      return <div>{responseJson[0]}</div>;
    })
    .catch((error) => {
      console.error(error);
    });
 };


 export default getJson;

This is the error I get.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

How should I do this? There is probably an easy way to do this in Gatsby but I was going to use React.

felixmosh · Accepted Answer · 2020-03-14 18:35:33Z

4

Your code has 2 issues:

You can't return a component that waits to Promise.
Fetching a cross domain assets will require CORS headers in your S3

You should refactor it to something like this:

import React, { useState, useEffect } from 'react';

function getJson() {
  return fetch('http://secstat.info/testthechartdata.json')
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

const MyComp = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getJson().then(list => setList(list));
  }, []);

  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
export default MyComp;

answered Mar 14, 2020 at 18:35

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nipy Over a year ago

Can you please explain what the code s doing? @felixmosh

felixmosh Over a year ago

Gatsby works with React Components, therefore, you need to return one. I've used useEffect & useState react hooks which you can read here reactjs.org/docs/hooks-intro.html

Collectives™ on Stack Overflow

JSON data from S3 text file using React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related