Build a Random Quote Machine - Trouble Accessing Props

I’m succeeding in passing props from state to my Quote component, but can only return them as an Object {}. How do I access the properties of that object? In this case I would like to console.log this.props.currentQuote but that returns undefined. Any help is appreciated!

Codepen: https://codepen.io/Ywehc/pen/MZaVwO?editors=1011

class App extends React.Component {

constructor(props) {
super(props);
this.state = {
currentQuote: “You don’t have enough talent to win on talent alone.”,
currentAuthor: “Herb Brooks”
}
}
render() {
return (




);
}
}

class Quote extends React.Component {
constructor(props) {

super(props);
}
render() {
console.log(this.props.currentQuote)
return

Why can’t I render {this.props.currentQuote} ?

;
}
}

ReactDOM.render(, document.getElementById(‘root’));

You are not passing any prop to the Quote class.

You have to be explicit about which prop to pass to each class/function,


// a simple class that render a <p> with a prop value
class MyComponent extends React.Component {
 render() {
   return (
       <p>{this.props.name}</p>
   )
}
}


// I have to pass name to MyComponent
<MyComponent name="FCC" /> // render a <p>FCC</p>
<MyComponent /> // not passing any name -> this.props.name is undefined here

You can read more about it on the official react documentation

2 Likes