Random Quote Machine | React-Redux. Feedback please

Hi all.
I just finished my Random Quote Machine project. I would appreciate any feedback.

For this project, I used:

  • A little SCSS in CSS;
  • React to render the quote box;
  • Redux and React-Redux to map the local state to a Redux store.

Also I faced a problem in the <a id="tweet-quote"> after clicking the tweet button, it works fine but the tweet button disappears from the page.

Anyone have any idea why this happens?

Update: the problem caused by adblock Plus extension :sweat_smile:

Here is My Quote Machine Project.

Thanks in advance :smiley:

1 Like

Hi great work, it seems to to its job quite well, there’s not much project using Redux here :+1:

For your tweet problem, I think the simple solution would be changing the href whenever the new quote button is clicked:

under the render()

<a id="tweet-quote" className="btn btn-primary" onClick={this.handleTweet} href={"https://twitter.com/intent/tweet?hashtags=quotes&text=" + encodeURIComponent(`"${this.props.quotes[0].quote}" - ${this.props.quotes[0].name}`)} target="_blank">Tweet Quote</a>

Note that you made a typo on the target, blanck

handleClick(e){
   ....
   ....
   ....
    document.getElementById("tweet-quote").setAttribute("href","https://twitter.com/intent/tweet?hashtags=quotes&text=" + encodeURIComponent(`"${this.props.quotes[randomNum].quote}" - ${this.props.quotes[randomNum].name}`));
  }
1 Like

@tkhquang thank you for your reply :smile:
I knew the problem, it was in my browser I tried the code on Firefox and it worked.
edited:
no sorry the problem still exists but instead of disappearing form the beginning it disappears after clicking.
when I click on the tweet button, it works fine but the tweet button disappears from the page.

yes, I did this but I defined a method instead and made it to handle the clicking of the anchor element and set the Attribute value for it.

yeah, thanks I corrected it :sweat_smile:

thank you again :smile:

@tkhquang
If you see anything else need to be modified, please go ahead and tell me :smiley:

yes, I did this but I defined a method instead and made it to handle the clicking of the anchor element and set the Attribute value for it.

I think you shouldn’t do that. My reason is that, when you change the href onclick, when users hover on the Tweet button, the status panel will show the old link instead of the new fetched one until clicked.

I think if you still want to do this, you can use “setState” to set values of new quote and the author in the handleClick method, then set the href on the anchor to this.state. so it will update everytime a new quote is fetched.

1 Like

@tkhquang
yeah, you are right, I will correct it
but I have a problem that the tweet button disappears after clicking, is this problem because changing the href in the method doesn’t cause re-rendering the JSX so it disappears ? what do you think ?

Well I don’t know, it doesn’t disappear on my end (tested both on Firefox and Chrome) :confused:

1 Like

okay thanks :smiley:
It disappears here on chrome, I think this is because chrome extensions… I will try to find the cause
thanks again

1 Like