React Datatable Values Duplicating - reactjs

Question

I'm fetching data from a firebase real-time database and its working, expect the head of the table which is the name, email and stuff. Its supposed to only show up once at the very top like every datatable, instead, its showing on every new entry.
(I apologise everything is in french)
Thanks in advance.
here's a picture:
here's my code:
import React from 'react'
import { bd, auth } from '../firebase'
import "../reserve.css"
import 'bootstrap/dist/css/bootstrap.min.css';
class Pro extends React.Component {
state = {
contacts: null
}
componentDidMount(){
bd.collection('contacts')
.get()
.then( snapshot => {
const contacts = []
snapshot.forEach( doc => {
const data = doc.data()
contacts.push(data)
})
this.setState({ contacts: contacts })
console.log(snapshot)
})
.catch ( error => console.log(error))
}
render(){
return (
<div className="ProClass">
{
this.state.contacts &&
this.state.contacts.map( contact => {
return(
<div className="ProClassReservations">
<table>
<thead>
<tr>
<td>Nom Complet</td>
<td>Email</td>
<td>Date d'arrivée</td>
<td>Date de Départ</td>
<td>Nombre de Personnes</td>
<td>Type de Chambre</td>
<td>Tel</td>
</tr>
</thead>
<tbody>
<tr>
<td>{contact.nom}</td>
<td>{contact.email}</td>
<td>{contact.arrive}</td>
<td>{contact.depart}</td>
<td>{contact.npersonnes}</td>
<td>{contact.type}</td>
<td>{contact.tel}</td>
</tr>
</tbody>
</table>
</div>
)
})
}
</div>
)
}
}
export default Pro

Answer 1

This is because you have the Table headers inside the map, you must ONLY map the values into the respective table rows. All you need to do is append the rows after your headers.
return (
<div className="ProClass">
<div className="ProClassReservations">
<table>
<thead>
<tr>
<td>Nom Complet</td>
<td>Email</td>
<td>Date d'arrivée</td>
<td>Date de Départ</td>
<td>Nombre de Personnes</td>
<td>Type de Chambre</td>
<td>Tel</td>
</tr>
</thead>
<tbody>
{
this.state.contacts &&
this.state.contacts.map( contact => {
return(
<tr>
<td>{contact.nom}</td>
<td>{contact.email}</td>
<td>{contact.arrive}</td>
<td>{contact.depart}</td>
<td>{contact.npersonnes}</td>
<td>{contact.type}</td>
<td>{contact.tel}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)