fetch quote api and display

.eslintcache

@@ -1 +1 @@
-[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4"},{"size":500,"mtime":1611491491707,"results":"5","hashOfConfig":"6"},{"size":201,"mtime":1611492929577,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611491491707,"results":"8","hashOfConfig":"6"},{"size":287,"mtime":1611492997507,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[]]
+[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4"},{"size":500,"mtime":1611491491707,"results":"5","hashOfConfig":"6"},{"size":201,"mtime":1611492929577,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611491491707,"results":"8","hashOfConfig":"6"},{"size":1061,"mtime":1611496041983,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[]]

src/components/quote-box/quote-box.jsx

@@ -1,15 +1,45 @@
+import React from "react";
 import "./quote-box-styles.scss";
 
-const QuoteBox = () => {
+class QuoteBox extends React.Component {
-  return (
+  constructor(props) {
-    <div className="wrapper">
+    super(props);
-      <div id="quote-box">
+    this.state = {
-        <h3 id="text">Deneme</h3>
+      quotes: null,
-        <p id="author">Deneme</p>
+      displayQuote: "null",
-        {/* new quote button */}
+      displayAuthor: null,
+    };
+  }
+
+  random = () => {
+    return Math.floor(Math.random() * 1600);
+  };
+
+  async componentDidMount() {
+    const response = await fetch("https://type.fit/api/quotes");
+    const json = await response.json();
+    await this.setState({ quotes: json });
+    const randomNum = this.random();
+    await this.setState({
+      displayQuote: this.state.quotes[randomNum].text,
+      displayAuthor: this.state.quotes[randomNum].author,
+    });
+  }
+  render() {
+    if (!this.state.quotes) {
+      return <div>Loading...</div>;
+    }
+
+    return (
+      <div className="wrapper">
+        <div id="quote-box">
+          <h3 id="text">{this.state.displayQuote}</h3>
+          <p id="author"> {this.state.displayAuthor} </p>
+          {/* new quote button */}
+        </div>
       </div>
-    </div>
+    );
-  );
+  }
-};
+}
 
 export default QuoteBox;