Data is not Rendering to the Screen in React Project

I have a react application that I am trying to render some basic JSON to the screen. I will place a small snippet of the JSON object below. I am trying to represent the data in the researchPage. I will be placing the entire component class below. Please let me know if I can provide any further information to clarify.

db.json – This is the JSON file that I am trying to pull data from.

{

    "hits": [
        {
            "_index": "issflightplan",
            "_type": "issflightplan",
            "_key": "IDP-ISSFLIGHTPLAN-0000000000000447",
            "_version": 1,
            "_score": null,
            "ContentType": {
                "__deferred": {
                    "uri": "https://bi.sp.iss.nasa.gov/Sites/FP/_api/Web/Lists(guid'a9421c5b-186a-4b14-b7b2-4b88ee8fab95')/Items(252)/ContentType"
                }

researchPage – This is the component page that I am trying to render the JSON data too. I have looked at the console and do not seem to be getting any errors. The page is showing, and the H1 Record MetaData is also rendering to the screen, however, there is no H3 or Paragraph below it.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import data from "../../data/db.json";


console.log(data);
class ResearchPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
            error: null,
            dataSet: [],
            data: [],
        }
    }

    componentDidMount() {
        this.setState({ isLoading: true });
        fetch(data)
            .then((res) => {
                debugger;
                if (res.ok) {
                    return res.json();
                } else {
                    throw Error("Error Fetching Data");
                }
            })
            .then((data) => {
                console.log(data);
                this.setState({ data: data, isLoading: false });
            })
            .catch((error) => {
                console.log((error) => this.setState({ error }));
            });
    }
    render() {

        const { error, isLoading, data } = this.state;
        const dataItems =  data.map((dataSet) => (
            <div key={dataSet.id}>
                <h3>{dataSet._index}</h3>
                <p>{dataSet.uri}</p>
            </div>
        ));
        if (error) {
            return <p style={{ color: "red" }}>{error.message}</p>;
        }
        if (!isLoading) {
            return <p>Loading Data...</p>;
        } else
            return (
                <div>
                    <h1>Record MetaData</h1>
                        {dataItems}
                </div>
            );
    }
}
export default ResearchPage;

43 thoughts on “Data is not Rendering to the Screen in React Project”

Leave a Comment