From 57976bcd729e6834b3867ca3da80d88d2a24a524 Mon Sep 17 00:00:00 2001
From: "marcusferl@web.de" <marcus170186>
Date: Wed, 29 Dec 2021 14:06:22 +0100
Subject: [PATCH] update

---
 App.js                 |  8 ++++++--
 js/components/Quote.js | 11 ++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/App.js b/App.js
index 2cd8564..0104d82 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'; // Bei React bzw. Nativ immer importieren!
 import { StatusBar } from 'expo-status-bar';
-import { Button, StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, View } from 'react-native';
 
 import Quote from './js/components/Quote';
 
@@ -15,19 +15,23 @@ export default class App extends Component {
   state = { index: 0 }; //initialer Zustand
 
   // Darstellung der Komponente im UI
-  // Render wird automatisch ausgeführt
+  // Render wird automatisch ausgeführt:
   // a) Komponente erscheint im Ui (initialer Zustand)
   // b) Zustand ändert sich (state) => this.setstate(...)
+  // c) probs sich ändern
   render() {
     let index = this.state.index;
     const quote = data[index];
     let nextIndex = index + 1;
     if (nextIndex === data.length) nextIndex = 0;
+    let prevIndex = index - 1;
+    if (index === 0) prevIndex = data.length - 1;
     return (
       //JSX
       <View style={styles.container}>
         <Quote text={quote.text} author={quote.author} />
         <Button title="Nächstes Zitat" onPress={() => this.setState({ index: nextIndex })} />
+        <Button title="Letztes Zitat" onPress={() => this.setState({ index: prevIndex })} />
         <StatusBar style="auto" />
       </View>
     );
diff --git a/js/components/Quote.js b/js/components/Quote.js
index 9758127..62cd0d9 100644
--- a/js/components/Quote.js
+++ b/js/components/Quote.js
@@ -3,10 +3,15 @@ import { Text } from 'react-native'
 
 export default class Quote extends Component {
     render() {
+        const { text, author } = this.props // destructuring
         return (
             <Fragment>
-                <Text>{this.props.text}</Text>
-                <Text>{this.props.author}</Text>
+                <Text style={styleText}>{text}</Text>
+                <Text style={styleAuthor}>&mdash; {author}</Text>
             </Fragment>);
     }
-}
\ No newline at end of file
+}
+
+// Styling in React Native mit JavaScript
+const styleText = { fontSize: 25, fontWeight: 'bold', color: 'black' };
+const styleAuthor = { fontSize: 17, fontsStyle: 'italic', color: 'red' };
\ No newline at end of file