How to loop through the state in react - reactjs

Question

I have a class named List and i recived some data from api and i had put it into state and i am reviving this data
(6) [{…}, 200, "OK", {…}, {…}, XMLHttpRequest]
0:
0: {id: "1", name: "vivek", fname: "manohar", mobile: "8824859583", photo: "http://localhost/freact/uploaded/student/194_axixa_cleaner-better-code-670x335.jpg"}
1: {id: "2", name: "anki", fname: "Sushil", mobile: "267877", photo: "http://localhost/freact/uploaded/student/382_axixa_Ankita.pdf"}
__proto__: Object
1: 200
2: "OK"
3: {content-type: "text/html; charset=UTF-8", content-length: "312"}
4: {url: "http://localhost/freact/index.php", method: "post", data: FormData, headers: {…}, transformRequest: Array(1), …}
5: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
length: 6
How i can print this data in table format which i am recieving
My code to retrieve data from api is
componentDidMount(){
const sendData = new FormData();
const thiss=this;
sendData.append('func','list');
sendData.append('qry','select * from student');
axios.post("http://localhost/freact/index.php",sendData)
.then(
(resp)=>{
Object.keys(resp).forEach(function(key) {
thiss.arr.push(resp[key]);
});
this.setState({data:this.arr});
}
)
}

Answer 1

You can achieve that with map
Try to write your code like this:
<table>
<thead><tr><th>title</th></tr>
</thead><tbody>
{ this.state.mydata.map(x =>
<tr><td>{x.title}</td></tr>}
</tbody>
</table>
Or you can start without using table to make it simpler to understand.
<div>
{this.state.yourstatename.map
(Myanyname=>
<div>{Myanyname.yourfield}</ div>
}
</div>
(For your code you should change fields,for example you dont have title field in your data)
If you want more specific hel,you should share your react code as well
I hope you get the idea and works for you

Answer 2

Assuming you are storing the data in variable named data
You can try
renderTable = () => (
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Fname</th>
<th>Mobile</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
{this.state.data.map(rowData => (
<tr key={rowData.id}>
<td>{rowData.id}</td>
<td>{rowData.name}</td>
<td>{rowData.fname}</td>
<td>{rowData.mobile}</td>
<td>{rowData.photo}</td>
</tr>
))}
</tbody>
</table>
)
If you don't want to render plain text in table body and want to use a element like <img> or <div> you can try that too in <td/> like
<td><img src={validSource} alt="alt" /></td>
Call the same renderTable function in render method as below
render() {
return(
<div>
{this.renderTable()}
</div>
)
}

Answer 3

If you want to get response only:
const sendData = new FormData();
sendData.append('func','list');
sendData.append('qry','select * from student'); // atencion at slq injection here
Fertch with axios:
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
axios.post('http://localhost/freact/index.php',sendData,config).then(response => this.setState({ users: response.body }));
Fetch with fetch:
fetch('http://localhost/freact/index.php', {
method: 'POST',
body: formData
}).then((r) => {
const contentType = r.headers.get("content-type");
if (contentType && contentType.indexOf("application/json") !== -1) {
return r.json().then(data => ({status: r.status, body: data}));
} else {
return r.text().then(text => ({status: r.status, body: text}));
}
}).then((res) => {
if (res.status == 200) {
// do something
this.setState({ users: res.body })
} else {
// handle error
console.warn(res.body.message)
}
}).catch((err) => {
console.log(err);
});
in render:
render() {
const { users } = this.state
return (
<div>
<table>
<thead>
....
</thead>
<tbody>
{
users.map(user => {
return <tr>
<td>{user.name}</td>
...
</tr>
})
}
</tbody>
</table>
</div>
)
}

Answer 4

First step will be declare a state variable as an array
state = { data : [] }
set your received data into data state
this.setState({
data : response.data
})
Then you can access your state data like this.state.data
render(){
const { data } = this.state
return (
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Mobile</th>
<th>Photo</th>
</tr>
{data && data.map(rowData => (
<tr key={rowData.id}>
<td>{rowData.id}</td>
<td>{rowData.name}</td>
<td>{rowData.mobile}</td>
<td>{rowData.photo}</td>
</tr>
)}
</table>
)
}
full example code click here