Showing JSON data in ReactJS - reactjs

Question

I cant show the JSON response to the HTML, all I am getting is his.state.selectedData.map is not a function.
This is the payload
{
"id": 1,
"name":"john",
"age" : 22
}
This is in the constructor
this.state = {
selectedData : []
}
This is the HTTP request:
axios.post("/api/data", data)
.then(res =>{
console.log(res)
this.setState({
selectedData : res.data
})
})
And this is how I am trying to show the result
<div>
<ul>
{ this.state.selectedData.map(data => {
<li>{data.name}</li>
})}
</ul>
</div>
what I am doing wrong ?

Answer 1

Initially selectedData is array after the ajax you changing it to object. So map function is not going work.
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedData :[]
}
}
readJson(json){
let output=[]
Object.keys(json).forEach(key=>{
output.push(
<li>{json[key]}</li>
)
});
return output;
}
render() {
return (
<div>
<ul>{this.readJson({ "id": 1,"name":"john","age" : 22 })}</ul>
</div>
)
}
}

Answer 2

The response from api is json object and your are trying to use map in json object will not work. Change selectedData to json object like below in the constructor
this.state = {
selectedData : {}
}
And in the code you can directly refer the name key like below and remove the map.
this.state.selectedData.name && <li>{this.state.selectedData.name}</li>

Answer 3

You could try something like this if you want to keep your state object as an array.
let newData = this.state.selectedData;
axios.post("/api/data", data)
.then(res =>{
console.log(res)
newData.push(res.data)
this.setState({
selectedData : newData
})
})

Answer 4

constructor(props) {
super(props);
this.state = {
loadedList: [],
lists: [],
};
}
componentDidMount() {
axios.get('http://localhost:3001/../static/data/terrifdata.json')
.then(response => {
this.setState({
lists: response.data,
loadedList: response.data,
isLoading: false
})
})
}
<div>
{loadedList.map((postDetail, index) => {
return (
<h5>
{postDetail.name}
</h5>
)}
}
</div>