Failing to Compile Data to Render in ReactJs

January 28, 2021 by admin

I am currently trying to fetch data from a JSON file and get it to render to a researchPage. Nothing I do seems to be working. I would like to fetch the data and put it into some sort of a table or visualization. Please let me know what I might be doing wrong. I am currently receiving the following error:

TypeError: Cannot read property ‘map’ of undefined

In the data directory I have

damon-data.json (this is a large file and would be impossible to place here, so I am placing a small portion)

{

    "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"
                }

then in the same directory I have

data.js – My thought was that I would fetch the data here and pass it to the research page using props

import React, {Component} from 'react';
import data from '../data/damon-data.json'
import axios from 'axios';


class Data extends Component {
    constructor(props) {
        super(props);

        this.state = ({
            dataSet: []
        })
    }
    componentDidMount() {
        let url = data;
        axios.get(url)
            .then(response => {
                console.log(response.data.hits)
                this.setState({
                    dataSet: response.data.hits
                })
            })
            .catch(error => {
                console.log(error)
            })
    }
}

researchPage.js – This is where the data should render (once I get it to render here I thought I could begin working to place it into a table. Unless there is a better way to go about it.

import React, { Component } from "react";


class researchPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(

            <div>
                {this.props.data.map((dataSet, index) => (
                   return <p>{dataSet.hits}</p>
                ))}
            </div>

        )
    }
}
export default researchPage

App.js

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import './App.css';
import Navbar from "./components/menu/navbar";
import Home from './pages/home/home'
import Explore from './pages/explore/explore'
import search from './pages/search/search'
import researchPage from "./pages/researchPage/reasearchPage";
import Query from './pages/query/query'
import Visualize from "./pages/visualize/visualize";
import Analyze from "./pages/analyze/analyze";
import Configure from "./pages/configure/configure";

class App extends Component{
  render() {
    return(
        <BrowserRouter>
          <div>
            <Navbar/>
            <Switch>
                <Route path="/" component={Home} exact/>
                <Route path="/explore" component={Explore} exact/>
                <Route path="/search" component={search} exact/>
                <Route path="/query" component={Query} exact/>
                <Route path="/visualize" component={Visualize} exact/>
                <Route path="/analyze" component={Analyze} exact/>
                <Route path="/configure" component={Configure} exact/>
                <Route path="/research" component={researchPage} exact/>
            </Switch>
          </div>
        </BrowserRouter>
    )
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();