Hey, I'm looking at this codepen: codepen.io/chriscoyier/pen/jqyWXo to learn how to work with data I get from json files in React. My attempt looks as follows:
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {NavBar} from './NavBar/navbar';
import {Concert} from './Concert/concert';
ReactDOM.render(<NavBar />, document.getElementById('navbar'));
ReactDOM.render(<Concert source="./concerts.json" />, document.getElementById('concert'));
registerServiceWorker();
//concert.js
import React from 'react';
import './concert.css';
var axios = require('axios');
export class Concert extends React.Component {
getInitialState() {
return {
concerts: []
}
}
componentDidMount() {
var th = this;
this.serverRequest =
axios.get(this.props.source)
.then(function(result) {
th.setState({
concerts: result.data.concerts
});
})
}
componentWillUnmount() {
this.serverRequest.abort();
}
render(){
return (
<div>
<h1>Concerts!</h1>
{this.state.concerts.map(function(concert) {
return (
<div key={concert.id} className="concert">
<a href="placeholder.asp">
{concert.name}
has a price of
{concert.price}
</a>
</div>
);
})}
</div>
)
}
}
Which doesn't seem to work, React throws me an " TypeError: Cannot read property 'concerts' of null " with reference to:
//here in index.js
ReactDOM.render(<Concert source="./concerts.json" />, document.getElementById('concert'));
//here in concert.js
{this.state.concerts.map(function(concert) {
The 'concerts.json' file is located in the /src folder as index.js is.
Is the concert component also in the src folder? I can imagine that the relative path is the source of the problem. Did you try it with an absolute path? (I mean an http adress like in the codepen)
A lot of times when I'm just trying to test something with fake data I'll just put the JSON into a javascript object and import it into my file. If it's non-parsed JSON that's basically just a big string I first just go into the development tools console of chrome and do a JSON.parse(); of the string. And then copy and paste the output into an object.
So if I had this sample JSON:
{ "data": { "forms": [ { "id": -4, "name": "New Form 2", "published": false, "publishedDate": null, "format": "[\"g:-1\", \"g:-4\"]", "groups": [ { "id": -1, "name": "Testing Edit", "format": "[]", "settings": "{\"locked\": false, \"showTitle\": true}", "type": "SECTION" }, { "id": -4, "name": "Section", "format": "[]", "settings": "{\"locked\": false, \"showTitle\": true}", "type": "SECTION" } ] } ] } }I would just put it in a file called
fakeData.jsand just have it export the object:// fakeData.js const jsonResponse = { "data": { "forms": [ { "id": -4, "name": "New Form 2", "published": false, "publishedDate": null, "format": "[\"g:-1\", \"g:-4\"]", "groups": [ { "id": -1, "name": "Testing Edit", "format": "[]", "settings": "{\"locked\": false, \"showTitle\": true}", "type": "SECTION" }, { "id": -4, "name": "Section", "format": "[]", "settings": "{\"locked\": false, \"showTitle\": true}", "type": "SECTION" } ] } ] } }; export jsonResponse;Then in your other file you just import that object and reference it in your component:
//index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; // Fake Data import { jsonResponse } from './fakeData'; import {NavBar} from './NavBar/navbar'; import {Concert} from './Concert/concert'; ReactDOM.render(<NavBar />, document.getElementById('navbar')); ReactDOM.render(<Concert source={jsonResponse} />, document.getElementById('concert')); registerServiceWorker();Might be a quick workaround if all you're attempting to do is work with fake data to get better at using react.
Another option would be to use jsonstub.com