Swear I am Doing this.right


#1

I have been spending so much time on this. Also just tried clicking run several times so that it would give me the code but it does not.

Here are the steps, and below that is the code. The basic idea of this exerciser to to pass promt from component to component. So from Greeting.js you create a component. Then export it, and in App,js you use that component inside a render function in App.js. The correct output renders on the display screen as well. But I can't get past the last step. Please help.

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 module.exports.

In Greeting.js, delete this statement from line 2:

var ReactDOM = require('react-dom');
At the bottom of Greeting.js, remove the entire call to ReactDOM.render, and replace it with this:

module.exports = Greeting;
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 var ReactDOM = require('react');.

On your new line, require the Greeting component class. Save the result in a variable named Greeting.
3.
In App.js, add a <Greeting /> instance to App's render function, 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!

// App,js

var React = require('react');
var ReactDOM = require('react-dom');
var Greeting = require('./Greeting');

var App = React.createClass({
  render: function () {
    return (
      <div>
        <h1>
          <Greeting name="name"/>
        </h1>
        
        <article>
          Latest newzz:  where is my phone?
        </article>
      </div>
    );
  }
});

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

// Greeting.js
var React = require('react');

var Greeting = React.createClass({
  render: function () {
    return <h1>Hi there, {this.props.name}!</h1>;
  }
});

// ReactDOM.render goes here:

module.exports = Greeting;

#2

https://www.codecademy.com/en/courses/react-101/lessons/this-props/exercises/pass-props-inter-component

In App.js, add a <Greeting /> instance to App's render function, immediately underneath the <h1></h1>.

Here is the text that was in the H1:

        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>

Below this, insert your instance component...

        <Greeting name="Wee Gillis" />

#3

Okay beneath <h1> tags not between. Thanks.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.