Object { rows: (1) […], count: 3 } My api is giving me this
count: 3 rows: Array [ {…} ] 0: Object { ELIGIBILITATE: "2022-04-10", BFA: "2022-04-11", id: "c53d945e-4bb1-49ab-91ca-c9e046ac5de7", … } Name:"Paul" BFA: "2022-04-11"
how to display the values in react? i've tried the following with no luck
class Test extends React.Component{
constructor()
{
super()
this.state={
row:[
]
}
}
componentDidMount()
{
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('myapi')
.then( response =>{
// handle success
console.log(response);
this.setState({row:response.data});
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
}
render() {
const { row } = this.state;
return (
<div>
<div>
{Object.keys(row).map(([key, value]) => {
console.log(row);
return (
<div>
{key} = {value.Nume}
</div>
);
})}
</div>
</div>
);
}
} export default Test
TLDR:
That's because the value you're setting for state.row is an array.
Try this: this.setState({row:response.data.rows[0]});
Explanation
The response from your request - response.data - is an object with the following keys: count and rows.
count is self explanatory.
rows on the otherhand is returned as an array of objects, which is what you're setting the value of state.row to.
Since you're expecting an object and not an array of objects (An assumption from your render code), you'll need to extract it from the response as so response.data.rows[0]