Hallo zusammen,
ich bitte euch um Hilfe bei meinem Problem. Und zwar muss ich im Studium eine Seite so nachbauen, dass ich mittels einer Filterauswahl eine Liste ausgeben kann.
Letztens haben wir gelernt, dass wir den Code anhand Komponenten aufteilen sollen. Ich habe also die Komponenten Titelleiste (wo der Filter, Logo und Titel enthalten sein sollte), Tabelle und Filter erstellt.
Zudem gibt es ja diese Hauptdatei App.js. In einem ersten Schritt habe ich in der Filter.js Funktionen geschrieben, um meine Daten gemäß der möglichen Suchbegriffe zu filtern und habe den aktuellen Wert, welcher vom Nutzer gewählt wird, in einem useState abgespeichert.
Wie kann ich diesen Wert nun der Tabelle.js übergeben, damit dort anhand der Filterung die Ausgabe generiert werden kann?
ChatGPT hat mir geraten, die Daten zuerst in die App.js zu schreiben. Aber wie geht das? Wie komme ich von einem Child in das Parent?
Ich denke, ihr erkennt, dass ich leider noch sehr unerfahren im Programmieren bin.
Folgend die Codes:
App.js:
const Titelseite = () => {
return (
<div className="titelseite-container">
<BasicTable />
</div>
);
};
const Tabelle = () => {
return (
<div className="tabelle">
<div>Tabellenleiste</div>
</div>
);
};
function App() {
const [service_ausg, setService] = useState("");
const [anbieter_ausg, setAnbieter] = useState("");
const handleServiceChange = (value) => {
setService(value);
};
const handleAnbieterChange = (e) => {
setAnbieter(e);
};
return (
<div className="App">
<Titelleiste>
<Filter
onChangeService={handleServiceChange}
onChangeAnbieter={handleAnbieterChange}
/>
<BasicTable />
</Titelleiste>
<Titelseite />
</div>
);
}
export default App;
Titelleiste.js:
import Grid from "@mui/material/Grid2";
import { Filter } from "./Filter";
import { useState } from "react";
import data from "./data/tableData.json";
export const Titelleiste = () => {
const getData = (data) => {
console.log("Ich bin in Titelleiste und komme von Filter");
};
return (
<Grid container spacing={2}>
<Grid item size={4}>
<p>
<img src="geoharvester.png" width="100px" height="50px" />
</p>
</Grid>
<Grid item size={4}>
<p>Ein Katalog für schweizer Geodienste</p>
</Grid>
<Grid item size={4} container justifyContent="flex-end">
<p>
<Filter onChange={getData} />
</p>
</Grid>
</Grid>
);
};
Filter.js :
import "./App.css";
import { useState } from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormHelperText from "@mui/material/FormHelperText";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import data from "./data/tableData.json";
import { App } from "./App";
export const Filter = ({ onChangeService, onChangeAnbieter }) => {
let array_service = data.map((element) => element.service);
let array_service_ausg = [...new Set(array_service)]; //* new "Set", entfernt automatisch die Duplikate und erstellt ein neues Objekt. Das neue Objekt wird mittels den "..." in eine Liste gespeichert
let array_anbieter = data.map((element) => element.anbieter);
let array_anbieter_ausg = [...new Set(array_anbieter)];
const funService = (e) => {
const [service_ausg, setService] = useState("");
setService(e.target.value);
};
const funAnbieter = (e) => {
TransferAnbieter(e.target.value);
};
return (
<div>
<form>
<Select name="service" onChange={funService} sx={{ width: 100 }}>
{array_service_ausg.map((service) => (
<MenuItem value={service}>{service}</MenuItem>
))}
</Select>
</form>
<Select name="anbieter" onChange={funAnbieter} sx={{ width: 100 }}>
{array_anbieter_ausg.map((anbieter) => (
<MenuItem value={anbieter}>{anbieter}</MenuItem>
))}
</Select>
<br />
</div>
);
};
Nach einigen Stunden, die ich bereits in die Recherche meines Problems investiert habe, danke ich euch herzlich für eure Hilfe.
