Painfully working my way through Random Quote Generator project

1

I feel like all the knowledge I have collected till now is sitting in various silos in my brain and I don’t have a coherent enough idea of how they all go together. So I am trying to start with the absolute smallest thing I know and move up from there. It’s very slow going.

Firstly, I wanted to create a button that flipped some text on page from yes to no. See screenshot:
Capture

Right now, when I click the button, nothing happens.

Running through my checklist:
1 - Created a NewQuoteButton function to hold button.
2 - Called that as JSX inside App class and assigned an event to run when button is clicked (handleClick).
3 - handleClick bind-ed (bound?) to this appropriately.
4 - handleClick event coded to change state from yes to no.
5 - <h1> displays state via {this.state.yesorno} - I expected this to display no after I click the button.

Help. And thanks.

This is my code in App.js file:

import React from "react"


class App extends React.Component{
  constructor(){
    super()
    this.state = {
      yesorno: "yes"
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(event){
    this.setState({
      yesorno: "no"
    })
  }

  render(){
    return (
      <div>
        <h1>Yes or No? {this.state.yesorno}</h1>
        <NewQuoteButton onClick = {this.handleClick} />
      </div>
    )
  }
}

function NewQuoteButton(){
  return (
    <div>
      <button>Press to flip from Yes to No</button>
    </div>
  )
}

export default App
2

There are different things you can do, but to keep it simple, rather than creating a function for your button, you could just throw a simple button into your render():


class App extends React.Component{
  constructor(){
    super()
    this.state = {
      yesorno: "yes"
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(event){
    this.setState({
      yesorno: "no"
    })
  }

  render(){
    return (
      <div>
        <h1>Yes or No? {this.state.yesorno}</h1>
        <button onClick={this.handleClick} id="yesorno" >Press to flip from Yes to No</button>
      </div>
    )
  }
}

Also, and sorry for the unsolicited advice if you already had this in mind, but if you would like this.SetState to toggle:

    this.setState({
      yesorno: this.state.yesorno === "yes" ? "no" : "yes"
    })
1 Like
3

Thanks @willjw3 !

I changed what the button is doing and moved to codepen: https://codepen.io/sabahatiqbal/pen/JwBXEp

In order to not keep opening Pandora’s boxes (of things I still don’t know :frowning_face:), I am not using an API call for now. (Although I do have another FCC Forum question posted about learning APIs, AJAX).

My question right now is about my tweet button/link. I am following the instructions here but it’s not clear to me where the twitter-share-button class is…? I tried googling it but there’s no information on whether this class is in v3 or v4…?

As you can see, right now my “tweet button” looks like text.

What am I missing?

4

If you mean that you want a button with the text in it, I would just wrap a button around your <a> tag.

<button><a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
          Tweet</a></button>

As far as tweeting the quote that pops up on your machine, you’ll have to append that to the URL in your href=, something like what’s given in the example on that ‘Tweet Button’ page you linked to.

href="https://twitter.com/intent/tweet?text=Hello%20world"

Of course, the text should be what’s displayed in your quote machine, and things aren’t as simple as they look on that page’s example.

It’s best to look at how this is done in the code of the example pen that’s linked to in the fCC project challenge objective until it makes sense to you, and then incorporate it into your own code. It’s a bit tough for those who are still new to all of this for sure. I actually just did this project using plain old vanilla JS, not React, mainly because I felt that if I wasn’t confident doing it the elementary way, I probably shouldn’t be doing it with React. Once I was comfortable with React (after I had completed all of the front-end projects, I went back and redid most of them with it. Except this one.

1 Like