Fetch and display Data from Django Rest Api - django

Question

after followed many tutorials about how to integrate Django rest in React i successed to fetch data from my api like this , but the header of my table repeat himself by the numbers of objects i fetch from my data , i have 3 products in my data so that is make the table 3 times .
When i try to move the {this.state.todos.map(item => ( just before my i get an error because that "break" my tag , so i can put {this.state.todos.map(item => ( just before my or just after , someone can help me plz ? i just want to repeat the for each item but not all the table , thanks you for help
Render of my table in the local server
import React, { Component } from 'react';
class Products extends Component {
state = {
todos: []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/');
const todos = await res.json();
this.setState({
todos
});
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
{this.state.todos.map(item => (
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="bg-gray text-white">
<th>Id</th>
<th>Category</th>
<th>Name</th>
<th>Short Description</th>
<th>Price</th>
<th class="text-center">Image</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">{item.title}</td>,
<td scope="row"></td>,
<td></td>
<td></td>
<td></td>
<td></td>
<td>Delete</td>
</tr>
</tbody>
</table>
))}
</div>
);
}
}
export default Products;

Answer 1

You're mapping over the whole table. This will map each item to a row:
class Products extends Component {
state = {
todos: []
};
async componentDidMount() {
try {
const res = await fetch('http://127.0.0.1:8000/api/');
const todos = await res.json();
this.setState({
todos
});
} catch (e) {
console.log(e);
}
}
render() {
return (
<div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr class="bg-gray text-white">
<th>Id</th>
<th>Category</th>
<th>Name</th>
<th>Short Description</th>
<th>Price</th>
<th class="text-center">Image</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.todos.map(item => (
<tr>
<td scope="row">{item.title}</td>,
<td scope="row"></td>,
<td></td>
<td></td>
<td></td>
<td></td>
<td>Delete</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}