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"
}
}
