Tweet Quote Help

I’m trying to get the Tweet quote functionality to work on my Random Quote Machine project. I’ve looked at a bunch of articles and tried a bunch of different links to get the correct href attribute, but nothing seems to be working. Is there something else I need to do for this to work?

Project instructions link:

Link to my project:

User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.

Something like this should work:

href={`https://twitter.com/intent/tweet?text=${yourQuoteTextVariable}`}

By the way, you have switched the author and quote.

Since I’ve never used jQuery in a project, do I need to add

<script> $(document).ready(function() {
});
</script>

as shown here ?

And if so, how much do I include inside the function?

Well, you do not need jQuery if you are using React. I’d suggest you keep using React, I see no reason to switch to jQuery.

The .ready() method is used to wait for the page (DOM) to be ready before trying to interact with it (manipulate or query elements).

The .ready() method is no longer recommended, you can just do:

$(function() {
  // all code that needs the DOM to be ready, or just all the code doesn't really matter
});

https://api.jquery.com/ready/


For plain JS you can use the DOMContentLoaded event.

OK I’ll avoid jQuery- I’ve only seen the $ symbol used in jQuery so I assumed that was what you were doing.

To clarify though, that code block isn’t jQuery, right? I tried it and am getting a console error.

render() {
    $(function() {
    const selectedQuote = quotes[this.state.generatedNumber][1];
    const selectedAuthor = quotes[this.state.generatedNumber][0];
    return (
      
      <div id="quote-box" class="text-center">
        <div id="text">{selectedQuote}</div>
        <div id="author">{selectedAuthor}</div>
        <button
          id="new-quote"
          onClick={this.generate}
          class="btn btn-default btn-primary"
        >
          New Quote
        </button>
        <br />
        
        
        <a
          id="tweet-quote"
          href="{https://twitter.com/intent/tweet?text=${selectedQuote}}"
          target="_top"
          rel="noreferrer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-twitter"
            viewBox="0 0 16 16"
          >
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          Tweet quote
        </a>
      </div>
      });
    );
  }
}

The error:

/src/App.js: Unexpected token, expected "," (70:6)

  68 |         </a>
  69 |       </div>
> 70 |       });
     |       ^
  71 |     );
  72 |   }
  73 | }

And to clarify, I can’t use DOMContentLoaded with React?

Check the brackets…

1 Like

This is jQuery. Don’t use that with React.

$(function() {
  // all code that needs the DOM to be ready, or just all the code doesn't really matter
});

I don’t know about can’t, but you don’t need it. You rarely need plain JS in React code.

OK I tried using your method and I’m still getting nothing; it’s just opening the project in a new tab:

import "./styles.css";
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import $ from "jquery";

const quotes = [
  ["- Maurice Ravel", '"The only love affair I ever had was with music"'],
  ["- Jean Sibelius", '"Music begins where the possibilities of language end"'],
  [
    "- Igor Stravinsky",
    '"I haven\'t understood a bar of music in my life, but I have felt it"'
  ]
];

export default class RandomQuoteMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      generatedNumber: 0
    };
    this.generate = this.generate.bind(this);
  }
  generate() {
    this.setState({
      generatedNumber: Math.floor(Math.random() * 3)
    });
  }
  render() {
    //$(function() {
    const selectedQuote = quotes[this.state.generatedNumber][1];
    const selectedAuthor = quotes[this.state.generatedNumber][0];
    return (
      <div id="quote-box" class="text-center">
        <div id="text">{selectedQuote}</div>
        <div id="author">{selectedAuthor}</div>
        <button
          id="new-quote"
          onClick={this.generate}
          class="btn btn-default btn-primary"
        >
          New Quote
        </button>
        <br />

        <a
          id="tweet-quote"
          href="{`https://twitter.com/intent/tweet?text=${selectedQuote}`}"
          target="_top"
          rel="noreferrer"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-twitter"
            viewBox="0 0 16 16"
          >
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          Tweet quote
        </a>
      </div>
    );
    //});
  }
}

Link to PRJ:

Why the outer quotes here?

1 Like