Embedded Files
You just passed information to a component’s props object!
You will often want a component to display the information that you pass.
Here’s how to make a component display passed-in information:
1 - Find the component class that is going to receive that information.
2 - Include this.props.name-of-information in that component class’s render method’s return statement.
Instructions
Instructions
1.Let’s walk through an example!
On line 11, you can see a piece of information being passed to <Greeting />. The information’s name is firstName.
How could you make firstName show up on the screen?
By including this.props.firstName somewhere in the Greeting class’s render method’s return statement!
On line 6, in between the returned <h1></h1> tags, add the following expression:
Hi there, {this.props.firstName}!
2.In the ReactDOM.render() call, change firstName‘s value to a different string.
Click Run. Once the browser refreshes, a new name should appear on the screen.
Greeting.js
import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
render() {
return <h1></h1>;
}
}
ReactDOM.render(
<Greeting firstName='Groberta' />,
document.getElementById('app')
);
Page updated
Report abuse