ReactDOM.render Not Rendering anything

Question

In my main file I have this code

import phoneReactElement from "../components/phone.js";

ReactDOM.render(<phoneReactElement />, document.getElementById('phoneComponentTester'));

"../components/phone.js" looks like this:

import React, { Component } from 'react';

class TestComponent extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>IT WORKED</div>
        );
    }

}
export default TestComponent;

It seems like its working correctly, because there's no errors in the console, and I can see the element in google chrome tools, but it seems to be empty. It doesn't show "IT WORKED", what am I doing wrong here?

This works for me: http://plnkr.co/edit/xfThQCIsF3PAc0OA2GTo?p=preview Can you double-check you're importing the right `phone.js`? — , Sep 22 '17 at 22:03
Thanks for putting that together, it seems one difference could be that I'm exporting the component (I think I'm doing this correctly). I confirmed that phone.js is correct. — SSH This, Sep 22 '17 at 22:08
I answered this below, but just noticed this is a possible duplicate of https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters — djfdev, Sep 22 '17 at 22:13
I tried your code in a new project, and the first issue was that it looks like your `components` folder isn't inside the `src` folder but next to it. That's not allowed. I moved it inside and changed the path from `..` to `.` and I got a blank page and an empty `phonereactelement` element. Then I changed `phoneReactElement` to `PhoneReactElement` in `index.js`, and presto, "IT WORKED". My advice would be to use `create-react-app`. — , Sep 22 '17 at 22:25

score 1 · Accepted Answer · answered Sep 22 '17 at 22:09

1

import phoneReactElement from "../components/phone.js";

needs to be :

import TestComponent from "../components/phone.js";

and to render it :

ReactDOM.render(<TestComponent />, document.getElementById('phoneComponentTester'));

answered Sep 22 '17 at 22:09

Amr Aly

3,871
2
16
33

Well thank you for the response, but I tried your fixes it and it didn't seem to make any difference. I think since its the default export it shouldn't matter what I name it? – SSH This Sep 22 '17 at 22:11
You right but the consistency is important and you shouldnt start your component with a lower case letter check @djfdev answer – Amr Aly Sep 22 '17 at 22:15
I agree, it should be upper case, I just wish it displayed it worked. It looks like there's nothing wrong with my code according to your examples. – SSH This Sep 22 '17 at 22:16
try to wrap the `div` tag inside another div – Amr Aly Sep 22 '17 at 22:20
1

Thanks for your help Amr! – SSH This Sep 25 '17 at 16:00

score 0 · Answer 2 · answered Sep 22 '17 at 22:11

0

JSX treats lowercase tags as regular HTML tags. You should rename phoneReactElement to PhoneReactElement or something else that starts with an uppercase letter.

See the docs for more information.

answered Sep 22 '17 at 22:11

djfdev

5,747
3
19
38

Thanks for the response, but I can see that its being rendered, if you look at the screenshot I attached, it seems to indicate that. I renamed it to be `PhoneReactElement` and it doesn't seem to work. – SSH This Sep 22 '17 at 22:14
Seems to be working fine in the link I provided ... I also confirmed that changing it to your version will render an empty, invalid HTML element called phonereactelement – djfdev Sep 22 '17 at 22:26

ReactDOM.render Not Rendering anything

2 Answers2