Random quote machine share button - need help

I’m wondering how I can use this twitter button for my current share button. I’m not sure why it doesn’t render.

Can you add more information? What is your expected output?
Maybe add a screenshot?

See the twitter button on the top left corner from the html? I want to use that button as the button for

<button id='twitter'  style={{backgroundColor:theColors[this.state.index]}}>
          <a id='tweet-quote' href="twitter.com/intent/tweet">Share</a>
          </button>

I want to replace the share button with this twitter button

I’m still stuck on this. Does anyone have any idea of why this doesn’t work?

Why do you have a mixture of HTML and JSX/React? This is an anti-pattern, and I would suggest you stick to using pure React (external scripts aside)

Are you talking about?
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

No, I expect that too stay as is. Moreso:

<a href=""></a>

<a href="twitter.com/intent/tweet" class="twitter-share-button" data-show-count="false">Tweet</a> 

I am unsure of what you are trying to accomplish, because, if you:

  1. Remove the unneeded HTML
  2. Replace the a tag in React with what you have in the HTML

It looks as so:
image

I want to completely replace the share button with the regular twitter button

You need to decide:

  • Do you want to use a button or an a tag?

Having both is unnecessary, as they are both clickable elements.


You have everything you need to do this. You have the tweet button including the styling, and you have a place for it in your JSX. Do this:

  1. Remove the unneeded HTML
  2. Replace the a tag in React with what you have in the HTML

Hope this helps

I must be doing something wrong because I end up with only text as the link. I am trying this using an a tag.

Why do you have 3 clickable elements for the same function:

<button
              id="twitter"
              style={{ backgroundColor: theColors[this.state.index] }}
            >
              <a id="tweet-quote" href="twitter.com/intent/tweet">
                Share
              </a>
            </button>
            
            <a href="twitter.com/intent/tweet" class="twitter-share-button" data-show-count="false">Tweet</a>

I suggest you use an a tag, but this means you need to remove the other related elements.

The element is styled by its class, which you have in the original a tag in the HTML.

I removed the others now. I still can’t figure out how you got the twitter style to work.

That does help.

Now, why do you expect the JSX element to look like the HTML element, when you do not use the same code:
HTML

<a href="twitter.com/intent/tweet" class="twitter-share-button" data-show-count="false">Tweet</a>

JSX

<a id="tweet-quote" style={{ backgroundColor: theColors[this.state.index] }} href="twitter.com/intent/tweet">
 Share
</a>

I changed it , but it still does not work. I even tried to copy and paste it, but the button does not render the same.

Did you replace class with className?

Ahhhhhhhh…So that’s been the issue the whole time, eh? Amongst my other mess. Thank you.

1 Like

I know this is completely unrelated, but do you know why adding a class makes me fail the test about the id requirement?

Sure. As I said previously, you need to remove unnecessary elements from the HTML:

<div id="root">

</div>

// This is unnecessary
<a href="twitter.com/intent/tweet" id='tweet-quote'></a>

So, that will confuse the tests. Also, the twitter script you have which includes some of the styling does not return an a tag, but an iframe:
image

So, within #quote-box there should be an a tag with #tweet-quote. However, twitter does some funny things to the page, when you use its styles.

Hope this clarifies