What Is JSX?: Links to anchors in lesson contents not working

[Darknab]

Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

Links to Assignment, knowledge check and Additional resources in What is JSX? are pointing to the top of the page instead of jumping to the proper section.
this is caused by the fact these three sections are simple divs nested inside the previous section: "Converting HTML to JSX", they should be sections with proper ids.

I'd like to fix it but I'll need some guidance, the MD file looks just fine for me, so I don't know what is causing the problem.

Path

Other / NA

Lesson Url

https://www.theodinproject.com/lessons/react-new-what-is-jsx

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[CouchofTomato]

Can you clarify what the issue is please as I can't find any adverse behaviour on this page.

[Darknab]

Sorry for my bad english;

Some links on Lesson contents are not working properly, clicking on "Assignment" will not get you to the Assignment section.
Same thing for "Knowledge check " and "Additional resources".

[KevinMulhern]

Two of the code examples are causing it. They are missing closing li tags and thats messing with the lesson markup for some reason.

Adding the missing </li> tags to these two examples should fix it:

[Darknab]

Thank you @KevinMulhern , now I understand where is the problem.

But we don't want to close the li tags since the example is highlighting the fact that not closing them may be acceptable in plain HTML but not is JSX.

May be we can replace <li> tags in this case by <li>, it would solve our issue!

[MaoShizhong]

I'd say we don't really need the ol/li example at all, given the camelCase bit is covered by stroke-width => strokeWidth, and the closing tag bit being covered by <input type="text"> => <input type="text" />. The lesson text would also need adjusting the account for this if so. Thoughts, @KevinMulhern?

In addition, the <form><input type="text"></form> bit in the first two examples should probably be kept in line with how the other elements are spaced across all the examples, i.e.

<form>
  <input type="text">
</form>

[MaoShizhong]

I'd say we don't need the ol/li example here. The rest of the example covers both points about camelCase and closing tags.

i.e. the first example should be changed to

<h1>Test title</h1>
<svg>
  <circle cx="25" cy="75" r="20" stroke="green" stroke-width="2" />
</svg>
<form>
  <input type="text">
</form>

and subsequent code blocks that demonstrate the fixes in stages should also be edited to reflect the ol/li removal. And lesson text that refers to the removed ol and li parts should also be amended accordingly.

Note that for some reason, in the first two of those code blocks, the <circle> tag within the <svg> is indented by 3 spaces instead of 2 - if you could fix those two up as well, that'd be awesome.

Assigning this to you, @Darknab