Übung für Klausur: Einkaufsliste mit React aus Class Components.
Erstellen Sie eine Einkaufsliste mit React. Hierbei sollen Class Components verwendet werden. Die Lösung der Aufgabe finden Sie in diesem Repository.
Die Liste soll im State gespeichert werden. Die Elemente der Liste sollen gemappt und an eine Komponente Artikel zusammen mit den Props name und menge übergeben werden.
this.state.liste.map((element) => <Artikel key={element.id} name={element.name} menge={element.menge}>)Zum Styling soll Bootstrap eingesetzt werden.
-
React-App aus Template erstellen
npx create-react-app <app-name>
-
unnötige Datein in
/srcentfernen: App.test.js, setupTest.jssrc/ ├── App.css ├── App.js ├── index.css ├── index.js ├── logo.svg └── reportWebVitals.js
-
Bootstrap in
/public/index.htmleinbinden:<html lang="de"> <head> ... <title>Einkaufsliste</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" /> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous" ></script> </body> </html>
-
App.js in Class Component konvertieren:
import React from "react"; import "./App.css"; export default class App extends React.Component { render() { return <div>App</div>; } }
-
State in
App.jsfestlegen:constructor(props) { super(props); this.state = { liste: [], eingabe: {name: "", menge: ""} } }
-
Formular zum Hinzufügen eines Artikels:
<form className="d-flex gap-2" onSubmit={this.addItem.bind(this)}> <input type="text" name="name" placeholder="Name" value={this.state.eingabe.name} onChange={this.setInput.bind(this)} /> <input type="number" name="menge" placeholder="Menge" value={this.state.eingabe.menge} onChange={this.setInput.bind(this)} /> <button className="bg-success border border-success text-white" type="submit" title="hinzufügen" > + </button> </form>
addItem(e) { e.preventDefault(); const newItem = { ...this.state.eingabe, // name: this.state.eingabe.name, menge: this.state.eingabe.menge id: this.state.liste.length + 1, }; this.setState({ liste: [...this.state.liste, newItem], }); }
setInput(e) { const { name, value } = e.target; this.setState({ eingabe: { ...this.state.eingabe, [name]: value, }, }); }
-
Komponente Artikel in
/src/Artikel.jsximplementieren:import React from "react"; export default class Artikel extends React.Component { render() { return ( <li> {this.props.name} ({this.props.menge}) </li> ); } }
-
Liste mit map() ausgeben:
<ul> {this.state.liste.map((element) => ( <Artikel key={element.id} name={element.name} menge={element.menge} /> ))} </ul>
(
keywird benötigt, um Elemente in Maps identifizieren zu können; für uns nicht relevant)