Create a Complex JSX Element "<ul> text bug"

JavaScript
1

Tell us what’s happening:
For some reason the challenge cannot be completed if you have some text for your <ul> element. I do not know if this is intentional or a bug in the tester file, but I wanted to report it

Your code so far


// write your code here
const JSX = <div>
  <h1>Start</h1>
  <p>Paragraph Two</p>
  <ul>#Doesnt work with this text#
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36.

Link to the challenge:

2

You can’t have anything except <li> inside of <ul>.

1 Like
3

It works fine as long as you don’t have

#Doesnt work with this text#

in there. Make sure you’ve cleared your cache and try another browser if it still doesn’t work.

4

As said it is invalid HTML, however I do see two problems.

  1. The challenge text makes it unclear.

You can include any text you want within each element.

  1. The test does not account for it and will pass if you have text in the UL and only have 2 LI’s
// This will pass, but shouldn't
const JSX = <div>
  <h1>Start</h1>
  <p>Paragraph Two</p>
  <ul>#Doesnt work with this text#
    <li>1</li>
    <li>2</li>
  </ul>
</div>

In fact, it does not check the UL’s children type at all.

// This will pass, but shouldn't
const JSX = <div>
  <h1>Start</h1>
  <p>Paragraph Two</p>
  <ul>#Doesnt work with this text#
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
  </ul>
</div>

assert(JSX.props.children[2].props.children.length === 3

I made a PR.