title: Fetch and display Data from Django Rest Api
body: <p>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 </p>
  
  <p><a href="https://i.stack.imgur.com/9jS8B.png" rel="nofollow noreferrer">Render of my table in the local server</a></p>
  
  <pre><code> 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 (
      &lt;div&gt;
        {this.state.todos.map(item =&gt; (
          &lt;table class="table table-bordered table-hover table-striped"&gt;
           &lt;thead&gt;
             &lt;tr class="bg-gray text-white"&gt;
               &lt;th&gt;Id&lt;/th&gt;
               &lt;th&gt;Category&lt;/th&gt;
               &lt;th&gt;Name&lt;/th&gt;
               &lt;th&gt;Short Description&lt;/th&gt;
               &lt;th&gt;Price&lt;/th&gt;
               &lt;th class="text-center"&gt;Image&lt;/th&gt;
               &lt;th&gt;Delete&lt;/th&gt;
             &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
               &lt;tr&gt;
                  &lt;td scope="row"&gt;{item.title}&lt;/td&gt;,
                  &lt;td scope="row"&gt;&lt;/td&gt;,
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;Delete&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
        ))}
      &lt;/div&gt;
    );
  }
   }
  
  
   export default Products;
  </code></pre>