FCC random quote machine: making handleClick method work

In the code below, it seems (based on the system’s feedback to my multiple prior attempted/failed solutions) that I’m having an issue with making the handleClick method work. Suggestions?

class App extends React.Component {
  constructor(props) {
    super(props);
    const quotes = [
      "Do what you feel in your heart to be right, for you'll be criticized anyway.",
      "Leadership is the capacity to translate vision into reality.",
      "Management is doing things right; leadership is doing the right thing.",
      "I have not failed 1,000 times. I have successfully discovered 1,000 ways to NOT make a light bulb."
    ];
    const authors = [
      "Eleanor Roosevelt",
      "Warren G. Bennis",
      "Peter F. Drucker",
      "Thomas Edison"
    ];
    this.state = {
      randomIndex: 0,
      quote: quotes[0],
      author: authors[0]
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClick() {
      if (this.state.randomIndex) {
        this.setState({
          randomIndex: (Math.floor(Math.random() * (quotes.length - 1))),
          quote: quotes[this.state.randomIndex],
          author: authors[this.state.randomIndex]
        });
      }
    }
    }
    render() {
      var quote = quotes[this.state.randomIndex];
      var author = authors[this.state.randomIndex];
      return (
      <div id="quote-box">
        <div className="row">
          <div className="col-md-8" id="left-col">
            <h5 id="text">{this.state.quote}</h5>
          </div>
          <div className="col-md-4" id="right-col">
            <button onClick={this.handleClick}>
              <a id="new-quote">NewQuote</a>
            </button>
          </div>
        </div>
        <div className="row">
          <div className="col-md-8" id="left-col">
            <h5 id="author">{this.state.author}</h5>
          </div>
          <div className="col-md-4" id="right-col">
            <button type="button">
              <a id="tweet-quote" href="twitter.com/intent/tweet">
                Twitter
              </a>
            </button>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

I know it doesn’t look pretty codewise to include the data in the component as I have so far, but I’m still at the stage of trying to get something quick and dirty that works (as opposed to quick and dirty that doesn’t).

I wonder if the issue might be related to CodePen itself: I copied and pasted one of the FCC tutorial examples into the CodePen editor and it didn’t seem to work.

Already spent way too much time and efforts on this. It feels like I need to find another complementary source to learn, as FCC explanations seem too brief and/or going too fast over important topics. And, conversely, the tutorial topics/tests that I could pass quickly on FCC were those that I had already learned about elsewhere.
Thanks in advance for any suggestion.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks are not single quotes.

markdown_Forums

1 Like

Oooops … thank you!!

Welcome, bjanne.

Remember, you are not supposed to define your methods inside the constructor.

Hope this helps

1 Like

Thank you! Yes, it did help: I’m now 10/12 steps passed thanks to your suggestion. Much appreciated!!