Reputation: 2192
I try to display Array data but does not display the data on the React web page. AnyOne guide me where is my mistake and correct me. Please see the comment line //
/* eslint-disable */
import React, { Component } from 'react';
import axios from 'axios';
class RestaurantList extends Component<{}, any> {
constructor(props: any) {
super(props);
this.state = { restoLists: null };
}
componentDidMount() {
axios.get("http://localhost:3030/restauranst")
.then((response) => {
this.setState({ restoLists: response.data })
console.log(response);
})
.catch((error) => console.error(error));
}
render() {
console.log(this.state.restoLists);
return (
<div>
<h1>RestaurantList</h1>
{
this.state.restoLists ?
<div>
<ul>
{
this.state.restoLists.map((itme: any) => {
console.log(itme.name); // work this line
<li>
{itme.name} {/**Does not work this line */}
</li>
})
}
</ul>
</div>
:
<p>Please Wait...</p>
}
</div>
);
}
}
export default RestaurantList;
API Response
{
"data": [
{
"id": 1,
"name": "Pizza Hut",
"address": "Dwarka Sector-14",
"rating": "4.5",
"email": "[email protected]"
},
{
"id": 2,
"name": "Mc-Dondle",
"address": "Dwarka Sector-15",
"rating": "4.0",
"email": "[email protected]"
}
],
"status": 200,
"statusText": "OK",
"headers": {
"cache-control": "no-cache",
"content-type": "application/json; charset=utf-8",
"expires": "-1",
"pragma": "no-cache"
},
"config": {
"url": "http://localhost:3030/restauranst",
"method": "get",
"headers": {
"Accept": "application/json, text/plain, */*"
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1
},
"request": {}
}
Upvotes: 1
Views: 33693
Reputation: 511
You were just missing parenthesis inside the return block of your map method:
this.state.restoLists.map((itme: any) => {(
<li>
{itme.name}
</li>
)})
Upvotes: 0
Reputation: 9779
Return from your map function as you are missing return. and loader also try to use through state. By default make isLoadding
to false
state
this.state = { restoLists: null, isLoadding : false };
componentDidMount() {
this.setState({isLoading: true})
axios
.get("http://localhost:3030/restauranst")
.then((response) => {
this.setState({ restoLists: response.data, isLoading: false})
}).catch((error) => console.error(error));
}
JSX
const { restoLists } = this.state;
return(
<div>
{isLoadding ? <ul>
{restoLists && restoLists.map(({id, name}: any) => {
return <li key={id}>{name}</li>;
});
}
</ul>
:<p>Loading...</p>}
</div>
)
Upvotes: 1
Reputation: 6766
You are not returning anything inside the map.
this.state.restoLists.map(({id, name}: any) => {
return <li key={id}>{name}</li>;
});
Also you can use shorthand method of arrow function,
this.state.restoLists.map(({id, name}: any) => <li key={id}>{name}</li>);
Upvotes: 7