Freecodecamp: [Beta] Learn About Self-Closing JSX Tags

Created on 13 Feb 2018 · 4Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Name

Issue Description

Removed the comments and closed the tags (Missed the br tag on first attempt failed then fixed) and then attempt failed but then the item rendered on the page.

Fail was from: The provided JSX element should render as is to the DOM node with id of challenge-node.
Item was rendered on the preview when receiving this error.
Appears it is being rendered not with challenge-node id but instead root id.

Added code: ReactDOM.render(JSX, document.getElementById('challenge-node'));
Tests passed and now it renders twice on the preview.

The Challenge states:

Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed.

It does not mention needing to attach it to the DOM and seems to indicate you only need to adjust the line-break and the horizontal-line.

Solution:
Need to add directions to render to the DOM and remove the current preview.
Or need to adjust the preview to be off of the challenge-node instead of the root id.
Or there is another solution that I can not currently think of.

Your Code

Failed:
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);

Passed: 
const JSX = (
  <div>
    <h2>Welcome to React!</h2><br />
    <p>Be sure to close all tags!</p>
    <hr />
  </div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'));

help wanted learn

Source

TJBarrettJR

All 4 comments

Thank you for reporting the issue! I don't believe we should add directions to render the component to the DOM.

It would be inconsistent with the behaviors of all of the other React DOM element challenges. For example, in the challenge before, Define an HTML Class in JSX, no ReactDOM.render is needed to pass the challenge.

@TJBarrettJR the reason why adding a ReactDOM.render to the code editor rendered the component twice was due to the way seeded code is rendered in freeCodeCamp. Files have a "body" code and a "tail" code. The tail is prepended to a user's code and usually contains a ReactDOM.render line, thus resulting in two renders.

jsonkao on 13 Feb 2018

👍1

The render line (shown below) is currently included in the seeds as a solution.

ReactDOM.render(JSX, document.getElementById('challenge-node'));

It is also tested for. I'll just open a PR modifying the solution and removing the test.

jsonkao on 13 Feb 2018

👍1

It's interesting—the challenge-node id is reserved for exercises that render HTML Elements to the DOM; I'm not sure how it ended up in the seed file.

I've checked for this unnecessary ReactDOM.render[ing] in the other React challenges; no others exist.

jsonkao on 13 Feb 2018

@jkao1 that makes sense on why it rendered twice, thank you!

So far I have not seen anything out of the ordinary with the other challenges, but I am still working through it.

TJBarrettJR on 13 Feb 2018

🎉1

Was this page helpful?

0 / 5 - 0 ratings