diff --git a/App.js b/App.js index 8ec5180..4c22af1 100644 --- a/App.js +++ b/App.js @@ -14,12 +14,23 @@ const data = [ { text: "Zitat5", author: "Author 5" }, ]; export default class App extends Component { - state = { index: 0, showNewQuoteScreen: false }; //initialer Zustand + state = { index: 0, showNewQuoteScreen: false, quotes: data }; //initialer Zustand // Eigene Methoden mit unterstrich am Anfang - _addQuote = () => { + _addQuote = (text, author) => { + + // 1. weise aktuelle Liste der Zitate (aus state) einer Variable zu + let { quotes } = this.state; + + // 2. füge neues Zitat an ds Ende der Liste an + if (text !== null && author !== null) quotes.push({ text, author }); + + + // 3 aktuallisiere die Liste im Stat + + // NewQuote Ausblenden - this.setState({ showNewQuoteScreen: false }); + this.setState({ showNewQuoteScreen: false, quotes }); } // Darstellung der Komponente im UI @@ -28,12 +39,12 @@ export default class App extends Component { // b) Zustand ändert sich (state) => this.setstate(...) // c) probs sich ändern render() { - let index = this.state.index; - const quote = data[index]; + let { index, quotes } = this.state; + const quote = quotes[index]; let nextIndex = index + 1; - if (nextIndex === data.length) nextIndex = 0; + if (nextIndex === quotes.length) nextIndex = 0; let prevIndex = index - 1; - if (index === 0) prevIndex = data.length - 1; + if (index === 0) prevIndex = quotes.length - 1; return ( //JSX diff --git a/js/components/NewQuote.js b/js/components/NewQuote.js index ead4682..2d49faf 100644 --- a/js/components/NewQuote.js +++ b/js/components/NewQuote.js @@ -4,13 +4,16 @@ import { Text, Button, Modal, StyleSheet, TextInput, View } from 'react-native'; export default class NewQuote extends Component { state = { content: null, author: null } //Inizialer Zustand render() { - const { visible, onSave } = this.props; // Einfachere strukturierung + const { visible, onSave } = this.props; // Einfachere strukturierung, ansonsten z.b this.probs.onSave const { content, author } = this.state; return ( //Neuer Screen { + this.setState({ content: null, author: null }); + onSave(null, null); + }} //Wird nur für Android benötigt animationType='slide'>