This site’s test is too paranoid/strict. This is the correct answer. The only reason it fails is not due to the code, but the comment added to the code. That should not trigger a test in any testing environment, ever.
In my opinion, it isn’t a typo. Here is my understanding of what is happening.
You are correct that we exported the Greeting component class to App.js. But class and instance aren’t the same thing. Within the App.js file, we make the following render:
The <App /> creates an INSTANCE of the App class. When this App instance is created, it fires up the App class’s render method which includes the statement: <Greeting name="Some name" />
This creates an instance of the Greeting component class. By giving it a name attribute and passing in some value, we are passing a prop to the Greeting component instance.
So, I think the sentence “… to pass a propto a <Greeting /> component instance, from an <App /> component instance.” does make sense.
Perhaps think of it like an example like this. Suppose our App class is meant to help us fill out a form. By exporting the Greeting component class, we make our App class aware that we have a form template available with some fields left blank in the form. We haven’t actually done anything with the form yet, we have just told App that we have a form available if needed. When we create our App instance, then in this process, the App instance creates a Greeting instance and passes in a prop. This is akin to printing out the form with the blank field filled by the name the App instance has provided. So, yes we exported the Greeting component class to App.js BUT information is flowing from the App INSTANCE to the Greeting INSTANCE.
The Greeting child component class should contain a this.props.name-of-information
Export the Greeting child component class
Go to the file containing the App parent component class, and import the Greeting child component class
Inside the return’s statement of the render method of the App parent component class, create an instance of the Greeting child component class and pass in a prop (for example <Greeting name="some name" />)
—> In other words, we pass in a prop to a <Greeting /> child component instance, from a <App /> parent component instance (which will itself be created from the App parent component class)
We render the <App /> parent component instance with ReactDOM.render(), which in turn will render the <Greeting /> child component instance with the props passed in.
Is that correct?
Note: The terms parent/child components are not used in this exercise but I’m referring to them based on this topic, as I find it helps understanding better how props flow from one component to another.
The only thing I don’t understand yet is how (in this exercise) the App component is the parent of the Greeting component, seeing that all components seem to be located at the same level in the file system.
I’ve been reading on props and found some helpful videos that made the whole flow around props clearer for me. If you visualise the flow in the same dynamic that functions declarations and functions calls work, it’s much less obscure.
Now my previous post appears to me as convoluted, like I got it all upside down. Here’s another try at explaining it:
Make sure the child component class is exported and imported into the parent component class file
Inside the return’s statement of the render method of the parent component class, create an instance of the child component class and pass it a props (for example <Greeting name="Esmerelda" />), like you would pass an argument to a function (<Greeting /> being the function and name=“Esmeralda” the props object argument). This is like calling a function (component) with the arguments (props) of your choice.
Inside the child component class, which is similar to a function declaration, there should be some JSX elements that make use of the information we just passed in to the child instance. We access that information with this.props.name-of-information (in our example this.props.name) which works exactly like a function parameter, or a placeholder for the value that will be set within the child component instance inside the parent component class, allowing us to keep the component reusable and the content dynamic.
We render the parent component instance with ReactDOM.render(), which in turn will render the child component instance with the props passed in (the function call).
Hah, it sort of clicked when I took a peak at how props are used with function components as opposed to class components, I wish this came earlier in the lesson
) below!
) to up-vote the contribution!
