Random Quote machine React need some advice

My first React project is coming to an end

Just left only Twitter button
But I would like to get some suggestions about my code
Now when Iā€™m looking on my code it look very messy
I use only one component App
May I need to split my code to the more components?
And question about componentWillUnmount() {}
i have used componentDidMount()
but what I need to do in componentWillUnmount() {}?
because now it is just empty method :slight_smile:

Sorry for my English
Here is my App component code

import React from "react";

import "../styles.css";
import colors from "../colors/colors";
import quote from "../api/api";

class App extends React.Component {
  state = {
    color: colors[0],
    quotes: "",
    authors: ""
  componentDidMount() {
//here I set the first quote when you first time opening browser
    const firstQuote = quote.get("/quotes.json");
    firstQuote.then(res => {
        quotes: res.data.quotes[0].quote,
        authors: res.data.quotes[0].author

  componentWillUnmount() {}

  handleColor = event => {
//here I generate random quote from API  array.length = 102
    const newQuote = quote.get("/quotes.json");
    let randomQuote = Math.floor(Math.random() * 102);

    newQuote.then(res => {
        quotes: res.data.quotes[randomQuote].quote,
        authors: res.data.quotes[randomQuote].author
//here I generate random quote from colors file  array.length = 12
    let color = Math.floor(Math.random() * 12);
      color: colors[color]

  render() {
    const colorStyle = {
      backgroundColor: this.state.color
    const quoteColor = {
      color: this.state.color
    return (
        <div className="header" style={colorStyle} />
        <div className="container-fluid" style={colorStyle}>
          <div className="row">
            <div className="col-1 col-sm-1 col-md-2 col-lg-3 col-xl-4 item1" />
            <div className="col-10 col-sm-10 col-md-8 col-lg-6 col-xl-4 item2">
              <h3 style={quoteColor}>"{this.state.quotes}"</h3>
              <h4 style={quoteColor}>"{this.state.authors}"</h4>
              <button style={colorStyle} className="btn twit">
                className="btn new-quote"
            <div className="col-1 col-sm-1 col-md-2 col-lg-3 col-xl-4" />
        <div className="bottom" style={colorStyle} />

export default App;

Its really helpful! Thank you for sharing it here.

1 Like