14:10 - Zitat der Liste hinzufügen

App.js

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Quote from './js/components/Quote';
import NewQuote from './js/components/NewQuote';

const data = [
  {
    text:
      'Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind.',
    author: 'Albert Einstein'
  },
  {
    text:
      'Man braucht nichts im Leben zu fürchten, man muss nur alles verstehen.',
    author: 'Marie Curie'
  },
  { text: 'Nichts ist so beständig wie der Wandel.', author: 'Heraklit' }
];

export default class App extends Component {
  state = { index: 0, showModal: false, quotes: data }; // initialer Zustand

  addQuote(text, author) {
    let quotes = this.state.quotes;
    quotes.push({ text: text, author: author });
    this.setState({ quotes: quotes, showModal: false });
  }

  render() {
    let index = this.state.index; // aktueller Zustand
    const quote = this.state.quotes[index];
    let nextIndex = index + 1;
    if (nextIndex === this.state.quotes.length) nextIndex = 0;
    return (
      // JSX
      <View style={styles.container}>
        <NewQuote
          visible={this.state.showModal}
          onRequestClose={() => this.setState({ showModal: false })}
          onPressDone={(text, author) => this.addQuote(text, author)}
        />
        <Quote text={quote.text} author={quote.author} />
        <View style={{ marginBottom: 10 }}>
          <Button
            title="Neues Zitat"
            onPress={() => this.setState({ showModal: true })}
          />
        </View>
        <Button
          title="Nächstes Zitat"
          onPress={() => this.setState({ index: nextIndex })}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

NewQuote.js

import React, { Component } from 'react';
import { Button, Modal, StyleSheet, Text, TextInput, View } from 'react-native';

export default class NewQuote extends Component {
  state = { text: null, author: null };

  render() {
    return (
      <Modal
        visible={this.props.visible}
        onRequestClose={this.props.onRequestClose}
      >
        <View style={styles.container}>
          <TextInput
            style={[styles.input, { height: '25%' }]}
            placeholder="Zitat eingeben"
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ text: text })}
          />
          <TextInput
            style={styles.input}
            placeholder="Autor"
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ author: text })}
          />
          <Button
            title="Fertig"
            onPress={() =>
              this.props.onPressDone(this.state.text, this.state.author)
            }
          />
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 40
  },
  input: {
    fontSize: 20,
    borderWidth: 1,
    borderColor: 'deepskyblue',
    borderRadius: 4,
    height: 50,
    width: '80%',
    marginBottom: 20,
    padding: 10
  }
});