Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Beta] Learn About Self-Closing JSX Tags #16710

Closed
TJBarrettJR opened this issue Feb 13, 2018 · 4 comments
Closed

[Beta] Learn About Self-Closing JSX Tags #16710

TJBarrettJR opened this issue Feb 13, 2018 · 4 comments

Comments

@TJBarrettJR
Copy link

@TJBarrettJR TJBarrettJR commented Feb 13, 2018

Challenge Name

Learn About Self-Closing JSX Tags

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'));
@jsonkao
Copy link
Contributor

@jsonkao jsonkao commented Feb 13, 2018

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
Copy link
Contributor

@jsonkao jsonkao commented Feb 13, 2018

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
Copy link
Contributor

@jsonkao jsonkao commented Feb 13, 2018

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.

@TJBarrettJR
Copy link
Author

@TJBarrettJR TJBarrettJR commented Feb 13, 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants