React project: Comment section issues

1

Hello! I’ve been working hard on a React project in CodeCademy and believe I’m including everything needed to make the project work. However, it is not so I’m missing something. Please take a look as I’ve imported the project into a project site.

Here is the link:

Thank you

2
  • use correct “elementId” in `createRoot" at “index.js”
  • “Card” is missing “props”, its a functional component which means you have to "explicitly pass it on as “component parameters”
  • you have a typo for “header” component in “Card”
  • “Header” and “Body” does not have any “components defined” in them, they are just empty files but you are calling them from “Card” with “props”

once you have addressed all that it should be fine, happy coding :slight_smile:

1 Like
3

I had a lot to fix but here is the updated version and it still isn’t rendering.

Updated project

Take a look, and thanks! Also, Idk how people do this (even for high 6 figures lol) for a living even for a FAANG. This is a little annoying.

4

Read the error message.

createRoot(…): Target container is not a DOM element.

It is telling you the element you are getting by id isn’t a DOM element. Why? Because you do not have an element with an app id in the HTML so getElementById is returning null which isn’t a DOM element.

Next error message.

img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

It is telling you the img element shouldn’t have a closing </img> tag and children and dangerouslySetInnerHTML is in the error message because you have a space inside the element so you have given it content which isn’t valid for an img element. <someElement>some content</someElement>

5

These are both very confusing to me because I’ve never understood void, and null in any of the languages I’ve studied lol. But I’ll check these and appreciate the help.

6

I have no idea what you’re saying in the DOM reply lol. I have all of the necessary elements needed AND I’m calling them properly. So idk what you or the counsel log error is saying.

7

Please show us where your HTML has an element with an id of app. Because as @lasjorg explained above, that’s the element your createRoot call is looking for.

1 Like
8

You do not really need to understand null or void to understand the errors.

null is a primitive type, it is basically a “non-existing” object. getElementById is supposed to return an Element object, but if it doesn’t find the element it will return null, as in the object it was asked to return doesn’t exist.

void just means empty. A void element is just an element that can’t have child content because it doesn’t have opening and closing tags.

void is also an operator in JS that can force an expression to return undefined. It isn’t used that often and is unrelated to the void element.

1 Like
9

This is all I can find from the pre set pre made CodeCademy files for the project.

Screenshot 2023-08-04 16.18.04

I think the <main id = "app" > is what you were looking for yes ?

10

Yes, in that pic of the HTML there is an element with the id of app. But in your HTML there is not. So createRoot(document.getElementById("app")).render(<App />) is going to fail because document.getElementById("app") isn’t going to return an element from the DOM but rather null.

11

Ohh well I’m not aware of that lol. I thought that is all you were referring too. Edit: That is the only HTML file I have access too there. Also, I don’t get why the instructor has a different HTML file set than I do lol

12

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