Embedded Files
You have learned how to pass a prop to a component:
<Greeting firstName="Esmerelda" />
You have also learned how to access and display a passed-in prop:
render() {
return <h1>{this.props.firstName}</h1>;
}
The most common use of props is to pass information to a component, from a different component. You haven’t done that yet, but it’s very similar to what you’ve seen already.
In this exercise, you will pass a prop from one component to another.
A curmudgeonly clarification about grammar:
You may have noticed some loose usage of the words prop and props. Unfortunately, this is pretty inevitable.
props is the name of the object that stores passed-in information. this.props refers to that storage object. At the same time, each piece of passed-in information is called a prop. This means that props could refer to two pieces of passed-in information, or it could refer to the object that stores those pieces of information :(
Instructions
Instructions
1.Your mission is to pass a prop to a <Greeting /> component instance, from an <App /> component instance.
If <App /> is going to pass a prop to <Greeting />, then it follows that <App /> is going to render <Greeting />.
Since <Greeting /> is going to be rendered by another component, that means that <Greeting /> needs to use an export statement.
In Greeting.js, delete this statement from line 2:
import ReactDOM from 'react-dom';
At the bottom of Greeting.js, remove the entire call to ReactDOM.render().
On line 3, add the word export to the beginning of the line, before the word class:
export class Greeting extends...
2.<App /> can’t pass a prop to <Greeting /> until App.js imports the variable Greeting! Until then, the characters <Greeting /> in App.js might as well be nonsense.
Select App.js. Create a new line underneath the line import ReactDOM from 'react-dom';.
On your new line, import the Greeting component class from ./Greeting. Remember to wrap Greeting in curly braces!
3.In App.js, add a <Greeting /> instance to App‘s render method, immediately underneath the <h1></h1>.
Give <Greeting /> an attribute with a name of “name.” The attribute’s value can be whatever you’d like.
When you click Run, <App /> will render <Greeting />, and pass it a prop!
greetings.js
greetings.js
import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.name}!</h1>;
}
}
ReactDOM.render(
<Greeting name='Groberta' />,
document.getElementById('app')
);
App.js
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1>
Hullo and, "Welcome to The Newzz," "On Line!"
</h1>
<article>
Latest newzz: where is my phone?
</article>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
StewDescriber.js
StewDescriber.js
import React from 'react';
export class StewDescriber extends React.Component {
render() {
return (
<div>
<h1>I AM THE STEW DESCRIBER</h1>;
<h1>THE WORLD'S GREATEST STEW IS {this.props.stew.toUpperCase()}!</h1>
<h1>HERE'S MY DESCRIPTION: IT'S MAD TASTY</h1>
</div>
);
}
}
main.js
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { StewDescriber } from './StewDescriber';
class MainPage extends React.Component {
render() {
return (
<div>
<h1>WELCOME 2 MY SITE WHERE I DESCRIBE THINGS!!</h1>
<h1>Today I will be describing stews! Tomorrow, who knows! Life is a journey</h1>
<StewDescriber stew="watery, pale, extremely cold stew" />
<h1>Don't forget to clap back in the comments</h1>
</div>
);
}
}
ReactDOM.render(
<MainPage />,
document.getElementById('app')
);
Page updated
Report abuse