How do I incorporate a link to a JSON file in React?

Tell us what’s happening:
I am currently using React to work through the random quote machine challenge on CodePen, and I have the basic framework and style of my site set up.

I understand that I will have to learn about using fetch within componentDidMount(), but is it possible to use this link destinyflavortext/flavortext.json at development · darkstarteam/destinyflavortext · GitHub or at least the raw version of it?

I realise none of this was covered in the front end challenges, but I am keen to learn how to include a JSON file. I am just unclear on:

  1. How to include the file in my code
  2. How to access its properties once it is included

any help or resources would be most appreciated, thanks

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

I think google is your friend here.

Google: “Import json into react”

One of the first results I get seems to explain it nicely.

I dont think you can import in codepen, only locally, that’s whats confusing me, so I have to use fetch

Ahh, sorry, I guess I overlooked the codepen part. I’m not a big codepen user so I’ll let someone else answer this.

I’d very, very strongly advise using CodeSandbox (or StackBlitz or similar) for React. CodePen is really designed for tiny little sketches, not apps: writing an entire app in a tiny little textbox that resolves to a single file is not likely to be a fun experience.

In comparison, CodeSandbox is a full code editor that lets you create muliple files and has all build tooling already set up. And if you need a JSON file, you should just be able to do import whateveritis from "./some-file.json"


Hey @DanCouper, I think you left out one important word: “against” :slight_smile:

Completely agree, don’t use codepen for these front-end challenges. If you are going to use react then I would suggest you build these locally using Create React App. It will introduce you to modern dev tools and processes used to create real world web applications.

1 Like

I agree, using Codepen for React just isn’t a great experience.

Here is an article on data fetching in React should you need it. You can fetch the raw JSON from the repo. Or as said, when using CodeSandbox you can just download the raw JSON file and use it as a file (add it as a file and import it in the component).

Shouldn’t take too much effort to transfer the code to CodeSandbox and it will be worth it. But if you want to keep the Codepen and need more help just ask.

@DanCouper @lasjorg @bbsmooth thanks for the replies guys, I’m real new to coding and have only learned from FCC so far, and have only used codepen as they directly link it from the challenge.

I’ll check out CodeSandbox and go from there :smiley:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.