Random Quote Machine - React Component - Tweet quote link breaks after click

JavaScript
#1

Tell us what’s happening:
I’ve created the random quote machine using React and overall I complete the Test Suite tests, but functionally the app is broken.

When clicking “Tweet This Quote” the link disappears and you can no longer tweet new quotes. As far as I can tell, the problem is with the ?text= section of the tweet URL, but I don’t know how to fix it.

I’ve tried a few things like using the HTML code, URI code, and just straight up moving it around and haven’t found a solution that works. When moving it into my encodeURIComponent() function, the link stays on the page but then the actual tweet link is broken.

Any thoughts? Thanks so much!

Your code so far
Here is what I have on codepen:

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0.

Challenge: Build a Random Quote Machine

Link to the challenge:

#2

try this https://twitter.com/compose/tweet?text=HelloWorld! but I’m not sure if this is what you’re looking for

#3

your code works fine, but also you could shorten it to something like this

	tweetLink = () => {
		let tweetMe = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent('"' + this.state.quote + '"' + ' - ' + this.state.author);
		this.setState({link: tweetMe});
	};

but for some reason it has brick the css for me I’m not sure…

1 Like
#4

Thanks! Looks like if I keep the original state the way it is, and use this link instead when changing state then all the tests pass and the link is functional.

1 Like
#5