JsonComponent

index.js

import JsonComponent from "./JsonComponent"

export default JsonComponent

JsonComponent.jsx

import React from "react"
import Foo from "./New-My-JSON-Content.json"

const JsonComponent = () => (
  <div style={{ maxWidth: `960px`, margin: `1.45rem` }}>
    <h1>{Foo.title}</h1>
    <ul>
      {Foo.content.map((data, index) => {
        return <li key={`content_item_${index}`}>{data.item}</li>
      })}
    </ul>
  </div>
)
export default JsonComponent

JsonComponent.stories.js

import React from "react"
import JsonComponent from "./JsonComponent"

export default {
  title: "JsonComponent",
}

export const standard = () => <JsonComponent />

New-My-JSON-Content.json

{
  "title": "This is Ellie's first webpage",
  "content": [
    {
      "item": "This is the first paragraph of Ellie's first webpage.  The rest of this text will be jibberish:   Velit deserunt sit exercitation dolore minim eiusmod. Ex incididunt mollit laborum eu non nulla aliquip nulla tempor. Sint dolor cupidatat voluptate mollit Lorem fugiat nisi. Fugiat sit labore officia ullamco non nostrud. Deserunt non ad ex sunt ex."
    },
    {
      "item": "everything at the moment is not awsome but after dis everything will be awsome ~"
    },
    {
      "item": 192.33
    },
    {
      "item": 111111
    }
  ]
}