How to display data(images) from a local Json file

Question

I am new to React and am trying to figure out how to parse this data file to create a number of divs with the images as backgrounds and the text overlayed. Right now, I am having a hard time with even getting any data to display on the page without editing the json file to have export const = images instead of what it is currently. The images listed in my example code are different than actual. Any help is greatly appreciated! Thanks!

images.json

{
  "images": [
    {
      "id": "1425ac9e-5718-4e2e-af43-132dcf58246b",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Lorem Ipsum",
      "subtitle": "sit amet"
    },
    {
      "id": "5427ake0-eb27-1bcb-84ds-d374e2098dd3",
      "description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Perspiciatis",
      "subtitle": "sed ut"
    },
    {
      "id": "23g8f61f-9heb-4d3b-a8e4-0b22c31deb0e",
      "description": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "Nemo Enim Ipsam",
      "subtitle": "sit aspernatur"
    },
    {
      "id": "6419ac9e-5718-4eee-af53-1d20cf58146b",
      "description": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.",
      "thumb": "https://source.unsplash.com/user/erondu/1600x900.jpg",
      "title": "At Vero Eos",
      "subtitle": "quos dolores"
    }
  ]
}

thumbs.js

import React from 'react';
import { images } from '../../data/images.json';

export const Thumbs = () => {
  return (
    <>
    <div className="thumb-container">
      {images.map((data, key) => {
        reutrn (
          <div key={key}>
            {data.thumb}
          </div>
        );
      })}
    </div>
    </>
  );
};

I also have a file that renders a .Thanks for reading!

Have you tried import data from '../../data/images.json' ? — c0m1t
– c0m1t, Commented Jan 8, 2021 at 21:26
Named imports work with Webpack's json loading. Did you use Create React App or something else? — user5774952
– user5774952, Commented Jan 8, 2021 at 21:35

user5774952 · Accepted Answer · 2021-01-08 21:36:36Z

1

You have return mispelled. That's the only error I can find in your code, I ran it in a brand new create-react-app app and it worked just fine. There could be an issue if you're not using a recent version of Webpack, but it would have to be a pretty old version to not have built in json loading. And here's my modified code, which is just showing the images rather than their URLs:

export const Thumbs = () => (
  <div className="thumb-container">
    {images.map((img, i) => <img src={img.thumb} key={i} />)}
  </div>
)

answered Jan 8, 2021 at 21:36

user5774952

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

Collectives™ on Stack Overflow

How to display data(images) from a local Json file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related