FAQ: Container Components From Presentational Components - Remove Logic from Presentational Component

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:

Web Development

Learn React.js: Part II

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 (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 (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why do we create a variable called src and assign it this.props.src instead of, img src={this.props.src}

Thank you!

1 Like

Hi everyone!
Why, in this exercise, we keep the ReactDOM.render in the GuineaPigsContainer, instead of the GuineaPigs that renders all the JSX?

1 Like

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.


Ok now I understand! :slight_smile:
Thank you very much for your kind answer!