Cannot run React app on codepen

1

I am trying to run a react app on codepen. It is the Random Quote Generator project of Front end libraries. I checked the syntax and everything seems to be fine. Even so, there is no output. Here is the link to my project - https://codepen.io/ambarish-gokhale/pen/LYpxLzy

Please help me find what is wrong with my project!

2

Welcome, asg.

Somethings to note:

  1. If you are using the keywords import, or require in CodePen, you are doing something wrong. Use the script finding and linking tool.
  2. React components should have a single, parent div element. The top level of a component should not contain siblings.
  3. You need to bind this to your class component’s methods.
  4. You have a syntax error in your getQuote method.

Hope this helps

3

Thank you for replying.
But I still don’t understand point numbers 2 and 4.

4 
this.componentDidMount = this.componentDidMount.bind(this);

This does not make much sense, as you are not calling this on componentDidMount anywhere. It is a built-in method. There is no need to bind this to it.

You appear to have fixed the syntax error.

return(
      <div> {/* You need this div as a wrapper */}
        <h1 className="title">Random Quote Generator</h1>
        <Box quote={this.quote} author={this.author} />
        <TwitterShare quote={this.quote} author={this.author} />
        <Button id="new-quote" title="New Quote" onClick={this.getNewQuote} />
      </div>
      );

When you write a component in React, you will, hopefully, attach it to an element:
Scenario 1

const Comp = () => (<div><p>Hello World</p><p>Hi World</p></div>)
...
// Inside your main component:
return(
  <div>
    <Comp />
  </div>
);

Because the Comp component has 1 parent element inside it, attaching it to another element is simple; You attach 1 thing in its place.

Scenario 2

// Notice, this component has 2 elements on the same level
const Comp = () => (<p>Hello World</p><p>Hi World</p>)
...
// Inside your main component:
return(
  <div>
    <Comp /> {/* You are attaching 1 element */}
  </div>
);

Now, imagine you are a computer. You have 1 space reserved for a component’s elements. However, that component is trying to append 2 elements to your 1 space. How do you arrange this? Who goes where?

Please do realise that the above is over-dramatised. I suggest you research this for yourself. Perhaps, watch this video: Deconstructing React

Hope this helps.

5

I know I’m probably wasting your time, but I still can’t get it to work. What do I do exactly?

6

Steps from last edit:

  1. Give Button component a parent div element.
  2. Give TwitterShare component a parent div element.
  3. Change functions inside QuoteBox component into methods.
  4. Fix all of your calls to this.quote and this.author.
  5. Pass your methods into the functional components as props.
  6. Fix all calls to methods using this.
  7. A bunch more…

Look, you have many repeated fundamental issues with your code. All I can suggest is for you to take another shot at the React part of the fCC course.

You need to focus on:

  1. Difference between a functional component, and a class component.
  2. How to pass state as props.
  3. How to call props.
  4. How to pass methods as props.
  5. How to set state in functional and class components.
  6. How to reference state within a component.
  7. Basic classes - What is a method.

Number 7 above is quite important, and should probably come first. The fCC curriculum does not cover this very well, as it is just brushed over. I suggest you do your own research into this.

I am sorry I could not be of more help, but I will not just give you the code.

Keep persevering.

7

You’ve helped me more than enough. I’m a slow learner anyway. I’ll re-visit those chapters you mentioned. Thank you for everything!
Update: I completed the project!