here is a link to my codepen:
https://codepen.io/Hker/full/BERJqg
here is my code:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
quoteText:"",
quoteAuthor:""
}
}
componentDidMount() {
axios.get('https://api.forismatic.com/api/1.0/?format=json&method=getQuote&jsonp=?&lang=en')
.then(res => this.setState({
quoteText:res.data.quoteText,
quoteAuthor:res.data.quoteAuthor
}));
}
handleClick() {
axios.get('https://api.forismatic.com/api/1.0/?format=json&method=getQuote&jsonp=?&lang=en')
.then(res => this.setState({
quoteText:res.data.quoteText,
quoteAuthor:res.data.quoteAuthor
}));
}
render() {
let tweetUrl = "https://twitter.com/intent/tweet?hashtags=quotes&text=" + this.state.quoteText + " ― " + this.state.quoteAuthor;
return (
<div className="App" id="quote-box" style={{margin:"auto"}}>Hello there!
<div id="text">
<Quote text={this.state.quoteText} />
</div>
<p id="author">{this.state.quoteAuthor}</p>
<div >
<button id="new-quote" onClick={this.handleClick.bind(this)}>Get a new Quote</button>
<a href={tweetUrl} className="fa fa-twitter" id="tweet-quote" target="_blank" rel="noopener noreferrer"> </a>
</div>
</div>
);
}
}
class Quote extends React.Component {
render() {
return (
<div>
{this.props.text}
</div>
);
}
}
React.render(<App />, document.getElementById('root'));