React Random Quote Machine issue with this.props

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.

Sure – in your render function, simply console.info(this.props) to see what is actually in your props.

As it happens, the only place you refer to the quote by this.props.quote is in the tweet link. And that’s the piece you find to be broken. Might there be a connection?

I got it to work using what you had in in your CurrentQuote component. I believe your code didnt work because your tag isnt a component with props passed to it.

<a className="button fa fa-twitter" href={tweet + quotes[this.state.randomIndex].quote} id="tweet-quote" target="_blank"/>
2 Likes

There is no question it’s the this.props.quote syntax that is the issue but the debugging is where I get stumped. When I console.info I receive the prototype object and the ways I am framing that question to google (“How do I access props within Object {}”) is not getting me very far.

1 Like

When do you think you’ve actually set props.quote?

I solved it using [ymoua17]'s solution but I really appreciate you framing the way I should think about this.

1 Like

A better solution could be creating a state for your generated quote and author. As your randomIndex is generated, you update the state of your quote and author. Then pass these state as props to your components. I’m still a noob, so if my terminology is incorrect someone please correct me XD.

1 Like

Why did you link Redux when not touching it? It will throw an error. :confused:

1 Like

Thank you I was wondering what generated that error!