I’m struggling to determine the correct syntax here when Tweeting my quote, this.props.quote is producing an undefined.
The codepen - https://codepen.io/Ywehc/pen/NoRBVa
Or my code, minus my enormous quotes const:
const tweet= "https://twitter.com/intent/tweet?text=";
class App extends React.Component{
constructor(props){
super(props);
this.state = {
randomIndex: 0
}
this.newQuote = this.newQuote.bind(this);
}
newQuote() {
let random = Math.round(Math.random() * (quotes.length-1));
this.setState({
randomIndex: random
})
}
render(){
return (
<div id="quote-box">
<div id="header">
<h1>Hockey Quotes </h1>
</div>
<div id="box-container">
<CurrentQuote quote={quotes[this.state.randomIndex].quote} />
<CurrentAuthor author={quotes[this.state.randomIndex].author} />
<div id="buttons">
<input id="new-quote" type="submit" value="New Quote" onClick={this.newQuote} />
<div id="tweet">
<a className="button fa fa-twitter" href={tweet + this.props.quote + " <-- this.props.quote
should appear to the left"} id="tweet-quote" target="_blank" />
</div>
</div>
</div>
<div id="hero">
</div>
</div>
);
}
}
const CurrentQuote = (props) => {
return(<h2 id="text">"{props.quote}"</h2>);
}
const CurrentAuthor = (props) => {
return (<h3 id="author"> {props.author} </h3>)
}
ReactDOM.render(, document.getElementById(‘quote-box’));
Was there a way I could have debugged this using the chrome or react dev tools? I feel like I looked through them carefully but am maybe missing something in the way i understand props.