Random Quote machine React need some advice

1

Hello,
My first React project is coming to an end
codesandbox

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 => {
      this.setState({
        quotes: res.data.quotes[0].quote,
        authors: res.data.quotes[0].author
      });
    });
  }

  componentWillUnmount() {}

  handleColor = event => {
    event.preventDefault();
//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 => {
      this.setState({
        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);
    this.setState({
      color: colors[color]
    });
  };

  render() {
    const colorStyle = {
      backgroundColor: this.state.color
    };
    const quoteColor = {
      color: this.state.color
    };
    return (
      <div>
        <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">
                Twit
              </button>
              <button
                style={colorStyle}
                className="btn new-quote"
                onClick={this.handleColor}
              >
                Click
              </button>
            </div>
            <div className="col-1 col-sm-1 col-md-2 col-lg-3 col-xl-4" />
          </div>
        </div>
        <div className="bottom" style={colorStyle} />
      </div>
    );
  }
}

export default App;
2

Its really helpful! Thank you for sharing it here.

1 Like