Step 3

Let's review the App's state:

  constructor(props) {
    super(props);
    this.state = {
      darkMode: false,
      quote: "",
      author: "",
    };
  }

The state is passed to the Quote components, which displays the quote and its author. It also binds various actions to the controls on the UI, such as the toggleColorMode to an IconButton.

  render() {
    const { darkMode, quote, author } = this.state;

    return (
      <Center
        w="100%"
        minH="100vh"
        bgGradient={
          darkMode
            ? "linear(to-r, #2C3E50, #4CA1AF)"
            : "linear(to-r, #d9a7c7, #fffcdc)"
        }
      >
        <Quote
          getRandomQuote={this.getRandomQuote}
          toggleColorMode={this.toggleColorMode}
          darkMode={darkMode}
          quote={quote}
          author={author}
        />
      </Center>
    );
  }