Failing to Compile Data to Render in ReactJs

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();

61 thoughts on “Failing to Compile Data to Render in ReactJs”

  1. Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make
    your point. You clearly know what youre talking about, why
    waste your intelligence on just posting videos to your weblog when you could be giving us something informative to read?

    Reply

Leave a Comment