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;
Source: stackoverflow.com
Related Query
- Fetching Firebase Data Into A Datatable In React
- Reading data from Firebase 3 into a React component with ES6 syntax
- Table body not updating in react , when fetching data from firebase
- Fetching data from Firebase with react
- Posting data into Firebase - with post request - React
- Fetching data from firebase with React Class component is rendering twice and even more
- React JS passing data from firebase into props for my component
- Typescript Error fetching data from firebase and store into array [IONIC]
- loading json data from local file into React JS
- Is there a right way to pass data into a React component from the HTML page?
- React with Firebase - submitting Formik form data
- How can I get data from a local file into my React app?
- React - load all data from json into component
- MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component
- React Redux, rerendering after data was fetched and mapped into component?
- How to perform a server side data fetching with React Hooks
- React setState doesn't re-render after fetching data
- Fetching large amount of data with loop or recursion with progress percentage in React / React native
- React Apollo first object from subscription not being merge into previous data it actually gets removed
- REACT - Set initial data in Formik Form after fetching from API
- Updating Data in Firebase using React
- Loading data into a React Native FlatList
- How to pass server data into React component
- React Firestore data retrieval into array not working
- How do I add a React form data to a Firebase real-time database?
- Recoding RShiny app into React App - how to get my data to my React App
- Converting array data into a table in react
- React Redux fetching data from backend approach
- show loading when fetching data react
- Fetching data from store if exists or call API otherwise in React
More Query from same tag
- Use lodash function to determine if one of the element in object fails
- Server-side rendering of component fails using ReactJS.NET
- react-icons/fa fails to install: Attempted import error: 'FaStar' is not exported from 'react-icons/fa'
- Styled Component ReferenceError: Cannot access 'Component' before initialization
- React page not refreshing automatically when using Router
- Angular CLI - exclude package from optimization
- Typescript, React & Socket.io-client Tests
- Adding state variable values in react's input tag
- React Remove Bootstrap button outline
- How do I display data sent from the express router in my react-component?
- React - How to clear the value of a React-Select when another React-Select changes
- Reactjs - Cannot read the property of undefined
- How can I use components in multiple files when adding React to a website?
- Only display item hovered on react after map
- How to get single element from firebase
- Updating states from input field when using React-Redux
- Use Pure Bootstrap v4 on ReactJs is NOT working
- Material-UI for java application?
- Setting default table order in Reactjs
- useState setter method not updating array
- React JSX How can I switch component state between two objects on a timer
- How to hide/show elements at certain breakpoints with Material UI?
- Problem importing whatsapp-web.js nodejs module in electron react app
- How to make a component visible/available only for few set of users in react?
- Edit an array with useState React Native
- Separate Css files in typescript react project do not apply
- React FixedDataTable responsive row/cell size
- React js: How to set props in JSX components which store in variable
- Async/Await in React
- Show validation when user selects specific radio button