This community-built FAQ covers the “Remove Logic from Presentational Component” exercise from the lesson “Container Components From Presentational Components”.
Paths and Courses
This exercise can be found in the following Codecademy content:
FAQs on the exercise Remove Logic from Presentational Component
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
We have separated our original component into two components: A container component and a presentational component. GuineaPigs is the presentational component. It does have a render function, but the rendering is not meant to be invoked from within this file.
Suppose you had the ReactDOM.render call in this file. What would happen? It would try to render this component, but the render function contains the statement let src = this.props.src; From where is it going to get this property? The presentational component isn’t importing any other file and we can’t just assume that it magically already has this property. By itself, the ReactDOM.render call from within this component wou;dn’t work as the component requires some external knowledge to work properly. However, if we change our perspective and think of this file as just a presentational component. A template. A reusable basic lego brick with empty slots. Then, by exporting this component to some other component, we say here is this presentational component all ready to go except for some blanks, some empty slots. Whatever container component (GuineaPigsContainer in this exercise) is importing this presentational component will have the responsibility of filling the empty slots/blanks by providing the necessary fill in the blanks to render the component.
The presentational component has some blanks which it can’t fill by itself. So, it shouldn’t be calling ReactDOM.render directly. Some other component is supposed to actually render this component and provide the necessary properties, so the container component should be making the ReactDOM.render call.
) below.
) to up-vote the contribution!