React Table not loading from Network Request - reactjs

Question

I am trying to create a table from my api. I did the following code:
export class News extends Component {
constructor(props) {
super(props);
this.state = {
dataObject: [],
currentPage: 1,
ItemsPerPage: 10,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id),
});
}
getAll = () => {
return new newsServices().GetNews().then((data) => {
this.setState({ dataObject: data });
});
};
componentDidMount() {
this.getAll();
}
render() {
return (
<div>
<h1>Get the Latest BEE News</h1>
<table>
<tbody>
{this.state.dataObject.map((result) => {
return (
<tr>
<td>{result.Subject}</td>
<td>{result.Summary}</td>
<td>{result.Url}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
But I am getting the following error: Uncaught TypeError: this.state.dataObject.map is not a function
My Json response looks as follows:
[{"Id":"00000000-0000-0000-0000-000000000000",
"Date":"2019-05-06T00:00:00",
"Subject":"Barloworld optimistic ‘black public’ will take up offer to invest in new property group",
"Summary":"Industrial group Barloworld is optimistic that qualifying black South Africans will respond positively to its offer to buy a maximum of 30% of the shares available in a new black-owned property company, called Khula Sizwe Property Holdings, being created as part of a larger R3.5-billion broad-based black economic empowerment (BBBEE) transaction.",
"Url":"https://m.engineeringnews.co.za/article/barloworld-optimistic-black-public-will-take-up-offer-to-invest-in-new-property-group-2019-04-25",
"Active":true}
I need to get my table only to show the Data, Subject, Summary, and Url, which if i can get one to show then i should be able to get all of them to show but i have no idea why my code is not working
UPDATE
Here is my getNews Function:
export class newsServices extends BaseApiService {
GetNews() {
return this.get(ApiUrls.NewsGetAll);
}
//ApiUrls is 'News/GetAll'
My baseApiService:
const axios = require('axios');
import { baseApiUrl } from '../constants/ApiUrls';
export class BaseApiService {
get<T>(url: string) {
return axios.get(`${baseApiUrl}${url}`).then((response: any) => {
return {
isSuccess: true,
value: response.data as T,
errorMessage: ''
}
}).catch((ex: any) => {
return {
isSuccess: false,
value: {} as T,
errorMessage: ex.message
}
});
}
post<T>(url: string, data: any) {
return axios.post(`${baseApiUrl}${url}`, data).then((response: any) => {
return {
isSuccess: true,
value: response.data as T,
errorMessage: ''
}
}).catch((ex: any) => {
return {
isSuccess: false,
value: {} as T,
errorMessage: ex.message
}
});
}
}
}

Answer 1

The get method of your baseApiService returns an object and not an array.
get<T>(url: string) {
return axios.get(`${baseApiUrl}${url}`).then((response: any) => {
return {
isSuccess: true,
value: response.data as T,
errorMessage: ''
}
}).catch((ex: any) => {
return {
isSuccess: false,
value: {} as T,
errorMessage: ex.message
}
});
}
So in your code when you assign the response from GetNews to your state's dataObject property, you have something like this...
this.state.dataObject = {
isSuccess: true,
value: [your data]
errorMessage: ''
}
Which you can't call map on, since it is not an array.
To fix the problem, either return that data array assigned to value from GetNews, or reference this.state.dataObject.value when you access your state, or assign your value property into the dataObject this.setState({ dataObject: data.value })