score:0

just change the tr around your data into td like here:

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">
        <table>
          <tr>
            <td>email</td>
            <td>name</td>
            <td>message</td>
          </tr>

          <h1>réservations:</h1>
          {this.state.contacts &&
            this.state.contacts.map((contact) => {
              return (
                <div classname="proclassreservations">
                  <tr>
                    <td>{contact.email}</td>
                    <td>{contact.message}</td>
                    <td>{contact.name}</td>
                  </tr>
                </div>
              );
            })}
        </table>
      </div>
    );
  }
}

export default pro;


Related Query

More Query from same tag