Random Quote Machine using React -- my tweet button doesn't render properly

JavaScript
1

Using the Twitter documentation, I tried adding a a Tweet button, its functionality is fine but it’s rendered as a link and not as the blue button with the bird. I built this in VS code using create-app-react-next. Here’s my code:

import React, { Component } from 'react';
import './App.css';

 
class App extends Component {
  state = {
    quoteText: undefined,
    quoteAuthor: undefined
  }

 getQuote = async() => {
   const api_call = await fetch ('https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en');
   const data = await api_call.json();   
   console.log(data);

   this.setState({
      quoteAuthor: data.quoteAuthor,
      quoteText: data.quoteText
   });
 }
  render() {
    if(!this.state.quoteAuthor && !this.state.quoteText){
      this.getQuote();
    }
    return (
      <div className="App">
        <TitleQuote getQuote = {this.getQuote} quoteAuthor = {this.state.quoteAuthor} quoteText = {this.state.quoteText}/> 
      </div>
    );
  }
}
const TitleQuote = (props) => (
  <div id="quote-box">
    <h3>Random Quote Machine</h3>
      <div>
        <h2 id="text">{props.quoteText}</h2>
        <h3 id="author">{props.quoteAuthor}</h3>
      </div>
    <button type="button" className="btn btn-default" onClick={props.getQuote}>Get Quote</button>
    <a className="twitter-share-button" href={`https://twitter.com/intent/tweet?text=${props.quoteText}--${props.quoteAuthor}`}>Tweet</a>
  </div>
)

My package.json looks like this:


{
  "name": "quote-matchine-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "boostrap": "^2.0.0",
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1",
    "react": "^16.5.1",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.5.1",
    "react-scripts": "1.1.5",
    "react-share": "^2.3.1",
    "react-twitter-widgets": "^1.7.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

image

3

Can you please post the css for className="twitter-share-button"

Is the class defined in your App.css file?

4

I don’t have any CSS definitions for that. I assumed it would be in one of the dependencies like react-share, bootstrap or react-twitter widgets but they don’t work. The documentation for tweet button isn’t much help either…

In the meantime, my solution was to go to a icon website, get the twitter icon and manually make the button blue.

5

So far you’re not importing anything that determines the look of the Twitter button. You should have a class in CSS that does that, and if that is included in one of the dependencies that you installed you should import them to this react file so the className "twitter-share-button" has a specific look

6

That’s all good you built your own, it is probably what the css class was doing anyway

7

You could just add bootstrap styles, they are created by twitter after all, all you need to do is all an image/svg of the bird. Notice the classname btn btn-primary

<a className="twitter-share-button btn btn-primary" href={`https://twitter.com/intent/tweet?text=${props.quoteText}--${props.quoteAuthor}`}>Tweet</a>

Just add this to your head tag in the index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
1 Like
8

Unfortunately, that doesn’t work for me. More specifically, the stylesheet link doesn’t seem to work with React, but otherwise it works with other non-React apps. The btn btn-primary works because I have the bootstrap dependency installed but that’s about it. Thanks for the answer anyway!

10

The stylesheet link is just a link to bootstrap, so looks like you have that all ready so it’s not going to do anything more for you.