Random Quote Machine on codepen

Hi everyone,
I have been on this for almost two weeks now - I have completed the project using react-app on vscode.
My problem remains how to separate it into html, css(scss) and js on codepen. I need assistance please.
I also wish to ask FCC to help newbies like me on relevant materials for further studies. I am completely new to this field.

Thank you in advance.

import React from "https://cdn.skypack.dev/react";
import {FaTwitter} from "https://cdn.skypack.dev/react-icons/fa";

class QuoteMachine extends React.Component{
    constructor(props) {
        this.state = {
          quoted: "Leadership is all about an imperfect being perfecting other imperfect beings.",
          quoter: "Mazi Chiadi Mbibi",
          tweet: ""
    clickHandler () {
      const myQuotes  = {
        "quotes": [
           "quote":"Life isn’t about getting and having, it’s about giving and being.","author":"Kevin Kruse"},
           "quote":"Whatever the mind of man can conceive and believe, it can achieve.","author":"Napoleon Hill"},
            "quote": "Strive not to be a success, but rather to be of value.", "author": "Albert Einstein"},
            "quote":"When you make mistake in the choice of a wife, you've equally made mistakes in the choice of children.","author":"Ijeghoahia Romanus Mbibi"}
       const arrLength = myQuotes.quotes.length;
       const quoteObj = myQuotes.quotes[Math.floor(Math.random() * arrLength)];
              quoted: quoteObj.quote,
              quoter: quoteObj.author,
       tweetHandler() {
                     tweet: this.state.quoted + "\n - " + this.state.quoter
       render() {
              return (
                     <div id="quote-box" className="container-fluid">
                            <div id="quote-area">
                                   <div id="text">
                                   </div><br />
                            <div id="author">
                                   <p>- {this.state.quoter}</p>
                            </div><br />
                            <div className="row-cover">
                            <div className="row">
                               <div className="col-xs-5">
                                   <button id="new-quote" onClick={this.clickHandler.bind(this)} className="btn btn-success">
                                          <span class="text-center">New quote?</span>
                                   <div className="col-xs-2"></div>
                                   <div className="col-xs-5">
                                   <a id="tweet-quote" onClick={this.tweetHandler.bind(this)}
                                   href={`https://twitter.com/intent/tweet?text=${this.state.tweet}`} target="_blank" rel="noopener noreferrer">
                                          <FaTwitter fontSize="2em"/>

ReactDOM.render(<QuoteMachine />, document.getElementById("quote-box"))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36

Challenge: Build a Random Quote Machine

Link to the challenge:

You can write react code in codepen

@adramelech Thanks for your response.

I have seen videos and have also tried my code and it ran except that it does not tweet on twitter.com. I have submitted my project link but could someone explain to me why I can run the code on vscode and tweet successfully but cannot tweet on codepen. Below is the error message.
Screenshot (493)

Please attach the codepen link

@adramelech The link to my code below. Please I need some corrections on my work too. I am a newbie,

You have not posted a link to your project on Codepen.