0

Using the create-react-app, I have created a simple React app to display the data fetched from the Flask endpoint. Though the fetch function can fetch the data from the HTTP endpoint, the map function can not read the retrieved data. The app produces errors like

TypeError: Cannot read property 'dataTime' of undefined (anonymous function) C:/Users/정보기획팀/Dropbox/yu_project/yu_blog_project/air_quality_react/src/DataList.js:10 7 | return( 8 | <div> 9 | {data.map((datum, i) => { > 10 | return <Data key={i} time={datum[i].dataTime} pm10={datum[i].pm10Value} pm25={datum[i].pm25Value} />; | ^ 11 | })} 12 | </div> 13 | )

The App.js is

import React, {Component} from 'react'; import './App.css'; import DataList from './DataList'; class App extends Component { constructor(props) { super(props); this.state = { airData: [] }; } componentDidMount() { fetch('http://210.123.33.247/airData') .then(response => response.json()) .then(data => this.setState({ airData: data }) ); } render() { const {airData} = this.state; console.log('air data from the state ', airData); return ( <div className="App"> <p>Data from the air quality</p> <DataList data={this.state.airData} /> </div> ); } } export default App;

And the DataList.js is

import React from 'react'; import Data from './Data'; const DataList = ({data}) => { console.log('from DataList', data[0]); console.log('pm value', data[3]); return ( <div> {data.map((datum, i) => { return ( <Data key={i} time={datum[i].dataTime} pm10={datum[i].pm10Value} pm25={datum[i].pm25Value} /> ); })} </div> ); }; export default DataList;

And the Data.js is

import React from 'react'; const Data = ({time, pm10, pm25}) => { return ( <div> <p>{pm10}</p> <p>{pm25}</p> <p>{time}</p> </div> ) } export default Data

The index.js is 

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); serviceWorker.unregister();

I appreciate it if someone please help me to locate the error. Many thanks.

Improve this question

2 Answers 2

Reset to default
1

The map function is a for loop which its first param is the object not the index, meaning 

{data.map((datum, i) => { return ( <Data key={i} time={datum[i].dataTime} pm10={datum[i].pm10Value} pm25={datum[i].pm25Value} /> ); })}

should change to:

{data.map((datum, i) => { return ( <Data key={i} time={datum.dataTime} pm10={datum.pm10Value} pm25={datum.pm25Value} /> ); })}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

To check the data structure, I did console.log('pm value', data[3]); as shown in the DataList.js. It returned {pm10Value: "31", o3Value: "0.011", pm25Value: "25", coValue: "0.5", dataTime: "2017-12-13 13:00", …}. It does not make sense the map function can't retrieve the data element from it.
Yes, I did that with no avail.
Sorry, your answer is correct. It worked. Thank you very much.
0

map is a for loop, which will not be executable within a return statement. So remove the primary return statement and change the const to the given below code snippet 

const DataList = ({data}) => { {data.map((datum, i) => { return ( <Data key={i} time={datum[i].dataTime} pm10={datum[i].pm10Value} pm25={datum[i].pm25Value} /> ); })} ); };

For error stating dataTime for undefined, check whether the inbound/incoming data from flask have hash within hash, if so you have to use Object.values(data.map((dataum, i) => {function})

Improve this answer

1 Comment

It did not work. It returned the error: DataList(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.