CodeyOverflow Forum - help me find the error

xuxuines · June 1, 2023, 3:06pm

Hello

I can’t find the error on my code. I review with the video codecademy provides and all seem the same. Can anyone help me find out where is the error?

gist.github.com

https://gist.github.com/xuxuines/f958372199f7318fecff2d3ec9955b7d

App.js

import React from "react";

function Body(props) {
  <p>{props.commment}</p>
}

export default Body;

Body.js

import React from "react";

function Body(props) {
  <p>{props.commment}</p>
}

export default Body;

Card.js

import React from "react";
import Header from "./Header";
import Body from "./Body";

function Card(props) {
  return (
    <>
      <Header
        profileImg={props.commentObject.profileImg}
        username={props.commentsObject.username}

This file has been truncated. show original

There are more than three files. show original

jameskeezer · June 1, 2023, 3:51pm

This all looks fine except App.js - it looks like it is a copy of Body.js

You may have lost the starter code for App.js, so here it is:

App.js:

import React from "react";
import { comments } from "./commentData";
// Step 12 goes here!

export default function App(props) {
  return (
      <div>
        {/* Step 6 goes here! */}
      </div>
    )
}

mtrtmk · June 1, 2023, 5:25pm

There are a number of issues that need to be corrected:

As noted by jameskeezer, your App.js file is just a duplicate of Body.js. The code in App.js needs to be replaced with the correct code.
In Body.js, you have a typo. You wrote props.commment instead of props.comment. You also need the return keyword so that the <p> element is returned.
In Card.js, you wrote commentsObject instead of commentObject. Step 6 mentions that in App.js, each Card component instance should be given an attribute named commentObject. Therefore, in Card.js, you should use props.commentObject. You have done so for the profileImg attribute, but for the username and comment attributes, you have used props.commentsObject which is incorrect.
In index.js,

// You wrote:
import {ReactDOM} from "react-dom/client";

// It should be:
import {createRoot} from 'react-dom/client';

Also,

// You wrote:
createRoot((document.getElementById = "app")).render(<App />);

// It should be:
createRoot(document.getElementById('app')).render(<App />);