React.js: how to use json data that is loaded in index.js in source file?

Question

So this is index.js (my entry point) and I'm loading the json data here

import React from 'react';
import ReactDOM from 'react-dom';
import fetch from 'isomorphic-fetch';
import {Filter} from './src/filter';

fetch('./pizza.json')
    .then(function(response) {
        return response.json()
    }).then(function(json) {
    console.log('parsed json', json)
}).catch(function(ex) {
    console.log('parsing failed', ex)
});


ReactDOM.render(<Filter />, document.querySelector('.content'));

Now in filter.js where I want to render the contents of the page, I'm not sure how to use the loaded data in index.js, here in filter.js

import React, {Component} from 'react';


export class Filter extends Component {
    render() {
        return (
            <div>
                    <h1> Pizza Search App </h1>

            </div>
        );
    }
}

I'm new at React.js and am trying to learn, having trouble understand basic react.js fundamentals, help!

This isn't really a react specific thing. since `fetch` is asynchronous, you will have to call `ReactDOM.render` inside your `then` callback in order to pass it to `Filter` as props. — azium, Oct 24 '17 at 22:20

score 0 · Answer 1 · answered Oct 24 '17 at 22:21

0

You should do the fetching in Filter

import React, { Component } from 'react';
import fetch from 'isomorphic-fetch';

export class Filter extends Component {

  state = {
    data: null
  }

  componentWillMount() {
    fetch('./pizza.json')
      .then(function (response) {
        return response.json()
      }).then(function (json) {
        console.log('parsed json', json)
        this.setState(() => ({ data: json }))
      }).catch(function (ex) {
        console.log('parsing failed', ex)
      });
  }

  render() {
    const { data } = this.state
    if(!data){
      return <div>Loading...</div>
    }
    return (
      <div>
        <h1> Pizza Search App </h1>
        (use data here...)
      </div>
    );
  }
}

answered Oct 24 '17 at 22:21

Alexander Vitanov

4,074
2
19
22

does the: ReactDOM.render(, document.querySelector('.content')); also go in filter.js? – D. A Oct 24 '17 at 22:26
also, I'm getting a syntax error at: state = { data: null} – D. A Oct 24 '17 at 22:33
that should be constructor() { super(); this.state = { date: null } } – finalfreq Oct 24 '17 at 22:43
@finalfreq Before downvoting make sure you know what you are talking about, refer to this https://stackoverflow.com/questions/39184778/why-set-a-react-components-state-outside-of-the-constructor – Alexander Vitanov Oct 24 '17 at 23:07
@D.A the error comes from you not using ES6-aware compiler plugin – Alexander Vitanov Oct 24 '17 at 23:07
This issue was solved. I'm not sure how to display the contents of pizza.json (it is just a list of strings) in place of "(use data here...)". I used this.state.data, but I'm not sure how to go forward with that – D. A Oct 24 '17 at 23:29
data.map(p =>
{p}
) – Alexander Vitanov Oct 24 '17 at 23:31
@alexandervitanov I'm getting this error in the console: "parsing failed TypeError: Cannot read property 'setState' of undefined" I'm guessing I put "data.map(p=>
{p}
)" in the wrong spot? I'm not sure I understand – D. A Oct 24 '17 at 23:55

score 0 · Answer 2 · answered Oct 25 '17 at 03:11

Alex is correct except you need to set the state once you've got the response:

EDIT: I missed that he had another link in his promise chain down there... either way, you only need the one. Like so:

componentWillMount() {
  fetch(...).then(res => this.setState({data: res.json()})).catch(....

Also, you need to 'stringify' the json in order to display it in the render method of your component. You're not able to display raw objects like that. Sooo... you'll need to do something like

...
render() {
  const { data } = this.state
  return (
    <div>
      <pre>
        <code>
          {JSON.stringify(data, null, 2)} // you should also look into mapping this into some kind of display component
        </code>
      </pre>
    </div>
  )
}

React.js: how to use json data that is loaded in index.js in source file?

2 Answers2