Json Data into Page in React

Question

I am trying to pull data from a local file into a page in React. I would like to use the data to build out a dynamically filled table. I could really use some help to understand what it is that I am doing wrong. The current error that I am getting is:

TypeError: Cannot read property 'map' of undefined

  41 | }
  42 | return(
  43 |     <div>
> 44 |         <h3>Title</h3>
     | ^  45 |         {data.map(dataSet => {
  46 |             <h3>{dataSet}</h3>
  47 |         })}

My files are below:

db.json - This is the file that I am using to pull data from. It is a large file so I have only used a snippet of the beginning of all of the JSON data. As you can see I am only trying to pull the entire JSON object into the file. I am not sure if that is a good idea, due to the size of the file

{

    "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.js - This is the file that I am trying to pull the JSON data into.

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


console.log(data)
class researchPage extends Component {
    state = {
        isLoading: false,
        error: null,
        dataSet: []
    }
    componentDidMount() {
        this.setState({isLoading: true})
        fetch(data)
            .then(res => {
                if(res.ok) {
                   return res.json()
            } else {
                    throw Error("Error Fetching Data")
                }
            })
            .then(data => {
                console.log(data)
                this.setState({ data, isLoading: false })
            })
            .catch(error => {
                console.log(error => this.setState( {error
                }))
            })
    }
    render() {
        const {error, isLoading, data} = this.state;

        if(error) {
            return <p style={{color: 'red'}}>
                {error.message}</p>
        }
        if(isLoading) {
            return <p>Loading Data...</p>
        }
        return(
            <div>
                <h3>Title</h3>
                {data.map(dataSet => {
                    <h3>{dataSet}</h3>
                })}
            </div>
        );
    }


}
export default researchPage;

Still check that this.state.data is an array or has length? Or maybe set the initial value of this.state.data to an empty array []? — evolutionxbox
– evolutionxbox, Commented Jan 28, 2021 at 17:05
dataSet is initialised in state, but data is used in the render. data starts off undefined. — evolutionxbox
– evolutionxbox, Commented Jan 28, 2021 at 17:33

Viet · Accepted Answer · 2021-01-28 17:54:56Z

1

There are several mistakes that you have made, this is what you should do:

Define data in state:

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

Change the condition check for isLoading:

    if (!isLoading) {
      return <p>Loading Data...</p>;
    } else

Extract the right property from data (data is an object, but you used map on it):

{data.hits.map((dataSet) => (
     <h3>{dataSet._index}</h3>
))}

Here is my minimal working sample: https://codesandbox.io/s/infallible-zhukovsky-96b95?file=/src/App.js:972-1064

answered Jan 28, 2021 at 17:54

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Json Data into Page in React

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