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!

Answer 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>
)