update

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
       <View style={styles.container}>

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
             <Modal
                 visible={visible}
-                onRequestClose={onSave} //Wird nur für Android benötigt
+                onRequestClose={() => {
+                    this.setState({ content: null, author: null });
+                    onSave(null, null);
+                }} //Wird nur für Android benötigt
                 animationType='slide'>
                 <View style={styles.container}>
                     <TextInput
@@ -29,7 +32,11 @@ export default class NewQuote extends Component {
                         style={styles.saveButton}>
                         <Button
                             title="Save"
-                            onPress={() => onSave(content, author)} />
+                            onPress={() => {
+                                this.setState({ content: null, author: null });
+                                onSave(content, author);
+                            }
+                            } />
                     </View>
                 </View>
             </Modal>

js/components/Quote.js

@@ -7,6 +7,7 @@ export default class Quote extends Component {
         return (
 
             // Methode 1
+
             /* <Fragment>
                  <Text style={styleText}>{text}</Text>
                  <Text style={styleAuthor}>&mdash; {author}</Text>