Create card on button click - reactjs

Question

so I've made a calendar with some text fields underneath that you can fill in.
How can I make it so that when you fill in everything here and click on the button, that it automatically creates a card with the stuff filled in above?
Firebase works without problems and everything you fill in also arrives in the database
It should look like this if you click on the button
And here my code:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
import Card from "#material-ui/core/Card";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import Paper from "#material-ui/core/Paper";
import { Checkbox, Container, Slide } from "#material-ui/core";
import Icon from "#material-ui/core/Icon";
import { StyleSheet } from "react-native";
import firebase from "firebase/app";
import "firebase/firestore";
import { db } from "../../firebase";
import { ScrollView } from "react-native-gesture-handler";
export default function DateAndTimePickers() {
const classes = useStyles();
const [ort, setOrt] = useState("");
const [notiz, setNotiz] = useState("");
const [hinweis, setHinweis] = useState("");
const [eintragen, setEintragen] = useState([]);
const [dateandtime, setDateandtime] = useState([]);
function handelDateandTime(e) {
setDateandtime(e.target.value);
}
function handelOrt(e) {
setOrt(e.target.value);
}
function handelNotiz(e) {
setNotiz(e.target.value);
}
function handelHinweis(e) {
setHinweis(e.target.value);
}
function KalenderEintrag() {
db.collection("Eintrag")
.doc()
.set({
ort,
notiz,
hinweis,
dateandtime,
})
.then(() => {
//If you wish to push the written data to your local state, you can do it here
setEintragen([...eintragen, { ort, notiz, hinweis, dateandtime }]);
console.log("Documents saved succesfully");
})
.catch((err) => {
console.log(err);
});
}
return (
<ScrollView style={styles.root}>
<Container>
<TextField
id="datetime-local"
label="Neues Ereigniss"
type="datetime-local"
defaultValue="2021-09-16T10:30"
className={classes.root}
InputLabelProps={{
shrink: true,
}}
onChange={(value) => {
handelDateandTime(value);
}}
/>
</Container>
{/* ORT */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Ort"
defaultValue="Text"
onChange={(value) => {
handelOrt(value);
}}
/>
</Container>
{/* Hinweis */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Hinweis"
defaultValue="Text"
onChange={(value) => {
handelHinweis(value);
}}
/>
</Container>
{/* Notizen */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Notizen"
defaultValue="Text"
onChange={(value) => {
handelNotiz(value);
}}
/>
</Container>
<Container>
<Button onClick={() => KalenderEintrag()} className={classes.btn} variant="outlined">Absenden</Button>
</Container>
{/* Kalender einträge */}
<Card className={classes.card}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
AUSFLUG
</Typography>
<Typography variant="h5" component="h2">
Wilheminenberg
</Typography>
<Typography className={classes.pos} color="textSecondary">
Jause wird mitgegeben
</Typography>
<Typography variant="body2" component="p">
Am 13.9.21 von 09:00 - 13:00
<br />
{"Abholung erfolgt im KG"}
</Typography>
</CardContent>
<CardActions>
<Button size="small" variant="outlined">
Zur Kenntniss genommen
</Button>
</CardActions>
</Card>
</ScrollView>
);
}
//material UI style
const useStyles = makeStyles({
root: {
marginTop: 30,
marginLeft: 16,
},
card: {
marginTop: 30,
marginLeft: 15,
marginRight: 15,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
table: {
marginTop: 30,
},
ortContainer: {
marginTop: 30,
marginLeft: 15,
marginRight: 15,
},
btn:{
marginTop: 20,
marginLeft: 15,
}
});
//React native style
const styles = StyleSheet.create({
root: {
backgroundColor: "white",
},
});

Answer 1

Just like that https://codesandbox.io/s/peaceful-hugle-ufkso
{/* Kalender einträge */}
{eintragen.map((item) => {
return (
<Card className={classes.card}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
{item.ort}
</Typography>
<Typography variant="h5" component="h2">
{item.notiz}
</Typography>
<Typography className={classes.pos} color="textSecondary">
{item.hinweis}
</Typography>
<Typography variant="body2" component="p">
{item.dateandtime}
<br />
{"Abholung erfolgt im KG"}
</Typography>
</CardContent>
<CardActions>
<Button size="small" variant="outlined">
Zur Kenntniss genommen
</Button>
</CardActions>
</Card>
)
})}

Answer 2

You can reference variables within your JSX code with curly brackets (this has already been done to apply styles for example at {classes.ortContainer}). Replacing text by variables works the same way, so for example replace "Wilheminenberg" by {ort} to have your website display the respective value.

Answer 3

import the card on react-bootstrab or material ui ,the use this method
**const [open ,setOpen] = useState(false);
enter code here
import React,{useState} from 'react';
import {Card} from '#material-ui/core'
function CreateCardButtonOnClick(){
const [open, setOpen] =useState(false);
const OpenCard=()=>{
setOpen(true);
};
const closeCard =()=>{
setOpen(false);
};
return(
<div>
<span>click to open Card viwe</span>
<button onClick={openCard}>openCard</button>
<Card>
<h1 onClick={openCard}>close</h1>
</Card>
</div>
)
export defult CreateCardButtonOnClick;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.6/react-dom.min.js"></script>
`/* import React,{useState} from 'react';
import {Card} from '#material-ui/core'
function CreateCardButtonOnClick(){
const [open, setOpen] =useState(false);
const OpenCard=()=>{
setOpen(true);
};
const closeCard =()=>{
setOpen(false);
};
return(
<div>
<span>click to open Card viwe</span>
<button onClick={openCard}>openCard</button>
<Card>
<h1 onClick={openCard}>close</h1>
</Card>
</div>
)
export defult CreateCardButtonOnClick;*/`