Create a Complex JSX Elementt

JavaScript
1

*Tell us what’s happening:
i am a newbie in react trying to go round this example but it seem my code is not working … how do i render react?

Your code so far


<body>
  <div id="app"></div>
  <script type="text/babel">
  const JSX = <div>
        <h1>kllkjlj jlkjlkjp</h1>
        <p>mnnlknn nlnnlnlnnlnadfnlds klkjj</p>
        <ul>
            <li>Paragraph One</li>
            <li>Paragraph Two</li>
            <li>Paragraph Three</li>
        </ul>
</div>;
  ReactDOM.render(JSX, app);
</script>
</body>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-complex-jsx-element

2

This is a JS-only editor, so HTML tags shouldn’t be present.

You just need to declare the JSX constant. The grader will call ReactDOM.render in the background, so you don’t have to do it yourself.

PS. Once you need to use ReactDOM.render yourself, the second argument should be something like document.getElementById('app'), not just app.

2 Likes
3

i did what you said by removing reactDom yet is still not working

4

i keep getting JSX is not defined

5

Did you also remove the HTML tags?

6

you can simply try this…

const JSX = <div>
                <h1>Header</h1>
                <p>Paragraph</p>
                <ul>
                	<li>List 01</li>
                	<li>List 02</li>
                	<li>List 03</li>
                </ul>
            </div>;

hope it works…