Quote Machine Project - Twitter Button

Hello all. I’m nearly finished my Quote Machine Project in React, but I’ve run into a stumbling block; the Twitter button.

-The first button passes test #10 (because it uses a href), but it doesn’t Tweet the quote properly. When I try to pass this.state.whattever into the href it was literally using “this.state.whatever”.

-The second button fails the test (because the href is blank), but it Tweets the quote properly. With onclick it calls a function which encodes the quote and author, and opens a new window for Twitter. It’s a dead link so it doesn’t reload the page.

If the second button has the proper functioning, does it matter that it fails the test? Or maybe there’s a better way to do this?

Seems like you got it working?

No, not really. It’s passing all the tests right now because I have both buttons there, but I should only have one.

The first button doesn’t quote properly, but passes the test. The second button quotes properly, but fails the test (because it doesn’t have a href).

I find a solution, but it’s kindof sloppy. Normally I wouldn’t do it, but I’m just doing it so it can pass the test.

-If the link has a HREF section, there doesn’t seem to be anyway to disable it from opening the website. But it needs this HREF to pass the test. So I took all the words out of the first link. It’s basically invisible:
<a href="twitter.com"></a>

-The second link is able to send the quote to Twitter properly:
<a onClick={this.tweetQuote} href="#">Tweet Quote</a>

Hey @adam-weiler. If you want to see how I did it, I made a video on it here: https://www.youtube.com/watch?v=lpba9vBqXl0. This solution passes the test, adds a cool Font Awesome icon, and allows the user to quickly tweet the quote.

Hope it helps!

1 Like

I understand your code in App.js, but I feel a bit lost with your code in QuoteMachine.js. You’re using something called Material-UI so that you can import Cards, IconButtons, CardActions… It’s a JS file so it’s still JavaScript… but is it still React or is it something else?

I tried using the ${this.state.currAuthor} and {this.state.currAuthor} inside the HREF tag, but it’s literally putting this.state.currAuthor into the URL. It displays the data properly if it’s in a paragraph or something, just not inside the HREF tag.

Hm, are you using backticks in your href property? Backticks is the syntax for template literals which is what enables you to use ${variableNameHere}.

1 Like

That’s wonderful, it’s working now! (Template Literals; there’s so much to learn about coding.)

I put the entire URL inside bracket and single quotes {’ '}, and I put the variable that contains the quote & author right at the end between the ’ and }. So inside the Return:
<a href={'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + res}>Tweet Quote</a>

To get that variable, I took the current quote and current author, and encode them for the URL. So right after the Render:
var uri = this.state.currQuote + " - " + this.state.currAuthor;
var res = encodeURIComponent(uri);

Glad you got it! Nicely done. Keep on learning!

1 Like