H Folks,
I’m just starting the random quote machine project and could do with a little guidance. I’m working on codepen using html, scss and React.
At the moment I have one stateful component from which I am trying to pass state values down to two stateless components as props:
For now, the state just has default values whilst I get things working. Baby steps!
// ***** Random Quote Machine Start *****
// stateful component
class MyApp extends React.Component {
constructor(props) {
super (props);
this.state = {
text: 'Our default quote',
name: 'Default Author'
}
}
render() {
return (
<div>
{/* pass on state values as props */}
<CurrentQuote text={this.state.text} />
<CurrentAuthor name={this.state.name} />
</div>
)
}
}
The two components that I am trying to pass props to:
// stateless component
class CurrentQuote extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
{/* this <p> tag is being rendered but props are not?*/}
<p>.... {this.props.text} ....</p>
</div>
)
}
}
// stateless component
class CurrentAuthor extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
{/* this <p> tag is being rendered but props are not?*/}
<p>Author - {this.props.name}</p>
</div>
);
}
}
Then I call the ReactDOM.render api:
// Render the components to the DOM
ReactDOM.render(<CurrentQuote />, document.getElementById("text"));
ReactDOM.render(<CurrentAuthor />, document.getElementById("author"));
I can see that the tags within the two stateless components are being rendered but the props text and name are not.
I must be doing something fundamentally wrong here? Would someone be kind enough to put me on the right tracks.
I know that I can put the entire html of my quote-box in the return statement of my stateful component so that I can access state values directly like so:
// ***** Random Quote Machine Start *****
// stateful component
class MyApp extends React.Component {
constructor(props) {
super (props);
this.state = {
text: 'Our default quote',
name: 'Default Author'
}
}
render() {
return (
<div>
<div id="wrapper">
<div id="quote-box">
<div id="top-row">
<i id="quote-icon" class="fa fa-quote-left"> </i><span id="text">{this.state.text}</span>
</div>
<div id="middle-row">
<div id="author">Author's Name: {this.state.name}</div>
</div>
<div id="bottom-row">
<a id="tweet-quote" href="twitter.com/intent/tweet" target="_blank"><i class="fa fa-twitter-square"></i></a>
<button class="button" id="new-quote"><span class="button-txt">New Quote</span></button>
</div>
</div>
</div>
</div>
)
}
}
// Render the components to the DOM
ReactDOM.render(<MyApp />, document.getElementById("JSX"));
…and get this result:
But that looks like one messy return statement! I’m sure that’s not how it’s supposed to be done which is why I created the other two components and tried to pass state values as props - it just isn’t working though and I’m not sure where I’m going wrong.
Can anyone help please?
The link to the project pen is here: Random Quote Machine Project
Cheers,
LT
