Using a local .json file in React
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.