CodeyOverFlow Forum Project

[josefroslan]

CodeyOverFlow Forum Project

I already followed every steps of the instruction but the browser won’t display anything.
There is no walkthrough video to guide us for debugging.
No one posted anything about this project in the forum.
Anyone if you can find the bug please I really appreciate your feedback.
Here is the code.

https://gist.github.com/codecademydev/e816753a7b14e1aec4dd5d68ed44d2ed

[0xstefan]

I’m having a similar issue, although I do note that you have createroot() instead of createRoot() in your index file.

My Gist: Codecademy export · GitHub

[josefroslan]

Thank you so much it finally worked!

[0xstefan]

I just had to compare my code file by file with yours and change mine to do the exports in the same way and now mine works… But what I don’t understand is why mine didn’t work before as there should be no difference between

import { App } from './App'; // and import App from './App';

or even

export default function App() { } // versus function App() { } export default App;

[josefroslan]

import { App } from './App';
This syntax is used when the “App” module is exported as a named export from the “./App” file.

import App from './App';
This syntax is used when the “App” module is exported as a default export from the “./App” file.

if you export App as default, I think it is better to import App without the curly braces.

---

I think below is the correct syntax since you are declaring the functional component App first before exporting it as default.

function App() {

}

export default App;

[course4275952551]

Thanks for the explanation!

[byemalin]

Hi!

Just wanted to post on here in case anyone else is stuck in the same way I was!
I also followed all the instructions but nothing ended up rendering. After a while of trying to figure it out and looking at other people’s code, I realised I had a problem with my App.js function declaration:

I was trying to return JSX within the mapping method like this:

function App() {
  comments.map((comment) => {
    return <Card commentObject={comment} />;
  });
};

But what I should have done is returned the whole mapping method, as it returns a new array anyway. Like this:

function App() {
  return {
    comments.map((comment) => {
      <Card commentObject={comment} />;
    });
  }
};

(Wrote it here without any syntactic sugar for clarity’s sake. You can have the whole App function body in one line too of course.)

function App() {
  return  comments.map(comment => <Card commentObject={comment} />);
};

Hope this helps someone out there lol!