0

I am using codepen.io to start with reactjs for the sample program. Below are my complete code. Not sure why the RenderDOM is not rendering the component correctly

HTML

    <div class="person">
    <h1> Raj </h1>
    <p> Age 27 </p>
    </div>

CSS

    .person{
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
    width: 200px;
    padding: 20px;
    }

JS (Babel)

    function Person()
    {
    return
    (
        <div className="person">
            <h1> Nandhi </h1>
            <p> Age 27 </p>
        </div> 
    );
    }

    ReactDOM.render(<Person />,
    document.querySelector('#p1'));

Attached the screenshot here: enter image description here

4
  • can you provide the codepen link? Mar 25, 2019 at 16:19
  • Can you try using document.getElementById('p1') instead of document.querySelector('#p1')?
    – SerShubham
    Mar 25, 2019 at 16:20
  • @TarunDugar The link of his codepen : codepen.io/Nandy264129/pen/JzzBVd
    – Bambou
    Mar 25, 2019 at 16:23
  • @Shaubam Zanwar - Removing the # symbol is not helping.
    – Nandy
    Mar 25, 2019 at 16:27

1 Answer 1

3

The problem is the return statement inside Person:

return 
(
)

Change it to:

return (
)

JavaScript returns undefined if there is nothing at the end of return indicating that the expression is running to the next line.

2
  • Thanks @Tarun. Its fine now :)
    – Nandy
    Mar 25, 2019 at 16:36
  • happy to help! :) Mar 25, 2019 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.