Unable to pass json reference data to react component

Question

I am trying to load dynamic content to a child component. I am able to render everything except for an img reference. I have tried changing the reference location inside the data.json. Here's the structure:

JSON Structure

[
{
    "name": "Mercury",
    "overview": {
      "content": "Mercury is the smallest planet in the Solar System and the closest to the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the Sun's planets. Mercury is one of four terrestrial planets in the Solar System, and is a rocky body like Earth.",
      "source": "https://en.wikipedia.org/wiki/Mercury_(planet)"
    },
    "structure": {
      "content": "Mercury appears to have a solid silicate crust and mantle overlying a solid, iron sulfide outer core layer, a deeper liquid core layer, and a solid inner core. The planet's density is the second highest in the Solar System at 5.427 g/cm3 , only slightly less than Earth's density.",
      "source": "https://en.wikipedia.org/wiki/Mercury_(planet)#Internal_structure"
    },
    "geology": {
      "content": "Mercury's surface is similar in appearance to that of the Moon, showing extensive mare-like plains and heavy cratering, indicating that it has been geologically inactive for billions of years. It is more heterogeneous than either Mars's or the Moon’s.",
      "source": "https://en.wikipedia.org/wiki/Mercury_(planet)#Surface_geology"
    },
    "rotation": "58.6 Days",
    "revolution": "87.97 Days",
    "radius": "2,439.7 KM",
    "temperature": "430°c",
    "images": {
      "planet": "./assets/planet-mercury.svg",
      "internal": "./assets/planet-mercury-internal.svg",
      "geology": "./assets/geology-mercury.png"
    }
  }
]

This is the file tree

Screenshot of folder structure

The data is within db, and the img is located within MobileView

This is the component in question

import React from "react";

function MobileView({ content }) {
  return (
    <div>
      <img src={content.images.planet} alt=""/>
      <h2>{content.name}</h2>

      {console.log(content.images.planet)}
    </div>
  );
}

export default MobileView;

Answer 1

URIs such as "./assets/planet-mercury.svg" found in your example, are not the actual paths once you bundle your application. Thats excludes paths from the public folder.

You can get more context in CRA docs.

Therefore, you need to use dedicated API such as require.

<img src={require(content.images.planet)} alt=""/>

Answer 2

import React, { Component } from "react";
import eventBus from "./eventBus";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        id: 12,
        firstName: "John",
        lastName: "Doe",
      },
    };
  }

  componentDidMount() {
    eventBus.dispatch("userData", this.state.user);
  }

  render() {
    return (
      <div>
        <Account />
      </div>
    );
  }
}

class Account extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
  }

  componentDidMount() {
    eventBus.on("userData", (user) => {
      this.setState({ user });
    });
  }

  render() {
    const { user } = this.state; // same as -> const user = props.user;
    return (
      <div>
        <span>
          Name - {user.firstName} {user.lastName}
        </spaenter code heren>
        <span>ID - {user.id}</span>
      </div>
    );
  }
}