Create Dynamic Table using Response data in reactJS - django

Question

My question is, I want to print table in reactJS. I have already use axios to get data from django views and I got a response. But, I don't know who to set this data in table format. I have used Table of react-bootstrap. And I am very new in ReactJS.
My Code Snippet is:
change(){
axios.get('http://127.0.0.1:8000/users/')
.then(function (response) {
console.log("in user",response.data[0].id);
this.setState({
id: response.data[0].id,
username: response.data[0].username,
email: response.data[0].email,
});
})
.catch(function (error) {
console.log(error);
});
}
But Now how to use this id, username, and email in "tbody" tag? Please Guide me. Thanks.

Answer 1

Inside your render function where you used react-bootstrap Component. Just use
<tbody>
<tr>
<td>{this.state.id}</td>
<td>{this.state.username}</td>
<td>{this.state.email}</td>
</tr>
</tbody>

Answer 2

You are actually only saving to state one element, you should save to state the resulting array of data.
import React, { Component } from 'react';
import Axios from 'axios';
export default class example extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
};
}
componentDidMount() {
Axios.get('http://127.0.0.1:8000/users/')
.then(function (response) {
this.setState({
users: response.data,
});
})
.catch(function (error) {
console.log(error);
});
}
render() {
const { users } = this.state;
return users.lenght > 0 ? (
<table striped>
<thead>
<tr>
<td>ID</td>
<td>Username</td>
<td>Email</td>
</tr>
</thead>
<tbody>
{users.map((user) => {
return (
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.username}</td>
<td>{user.email}</td>
</tr>
);
})}
</tbody>
</table>
) : (
<h1>No data available!</h1>
);
}
}