Why do not ReactJS render one component inside another?

Question

I am learning ReactJs. I want to use one componemt inside the other component. I looked this, this and this and other sources, tried to apply the solutions, but they did not help me...

My list.html contains:

<body>
...
<div id="filtered_list"></div>
<script src="built/test.js"></script>
<script src="built/filteredList.js"></script>
</body>

test.js:

'use strict';
 const React = require('react');
 const ReactDOM = require('react-dom');
 const client = require('./client');
 class Test extends React.Component {
   constructor(props) {
    super(props);
    this.state = {hellomsg: "one"};
    this.state.hellomsg = "I cannot get information from the REST. If you can, help me please.";
   }
render() {
    client({method: 'GET', path: '/hello-world'}).done(response => {
        //this.setState({hellomsg: response.entity});
        this.state.hellomsg = response.entity;
    });

    return (
        <p>{this.state.hellomsg}</p>
    )
}
}
ReactDOM.render(
   <Test  />,
   document.getElementById('test')
)
export default Test;

filteredList.js:

'use strict';
 import Test from './Test';
 const React = require('react');
 const ReactDOM = require('react-dom');
 class FilteredListManger extends React.Component {
   render() {
    return (
        <p>Example Text</p> + <Test/>
    )
   }
}
ReactDOM.render(
<FilteredListManger />,
document.getElementById('filtered_list'))

< Test / > is not rendered, I have white page.

If I remove "import Test from './Test';" and "+ < Test / >" from filteredList.js, I can see "Example Text" text in the page, it's good.

When I open debug mode in Chrome in Sources tab, I do not see errors, if I open Console tab, I see

Uncaught Error: _registerComponent(...): Target container is not a DOM element.

It leads to test.js:

ReactDOM.render(
<Test/>,
document.getElementById('test')
)

I already applied solution from here, so I do not think this is the reason.

All my js files are in /src/main/js.

After webpack builds the project, they are in /src/resources/static/build.

Htmls are in /src/resources/templates.

What should I change here to I can use rendered result of test.js in filteredList.js?

score 3 · Accepted Answer · answered Feb 21 '18 at 14:27

3

You should wrap your return of FilteredListManger in a single div like this: `

<div>
 <p>Example Text</p>
 <Test/>
</div>

By the way, there is a lot of weird things in your code like the class to only use the render method in the FilteredListManger component... Then, you can delete the ReactDOM.render wich is useless in the Test component

answered Feb 21 '18 at 14:27

Lucas Charvolin

328
2
8

1

Thank you. I added divs like you suggested and deleted ReactDOM.render from test,js. And it works! – RuF Feb 22 '18 at 08:44

score 1 · Answer 2 · answered Feb 21 '18 at 14:26

1

It's because the tag <div id="test"></div> doesn't exist in your HTML. For React to render the component to DOM it needs a valid DOM element. When document.getElementById('test') runs it returns an undefined object and undefined is not a DOM element.

answered Feb 21 '18 at 14:26

Adarsh

827
9
23

Your suggestion work if I also add div tags into return of FilteredListManger. Thank you. – RuF Feb 22 '18 at 08:48

score 0 · Answer 3 · answered Feb 21 '18 at 14:30

0

To avoid the extra div markup you could simply use:

<React.Fragment>
 <p>Example Text</p>
 <Test/>
</React.Fragment>

answered Feb 21 '18 at 14:30

Michael L Rhyndress

105
2
11

Not all tool sets support this functionality yet. Read more about this method here: https ://reactjs.org/docs/fragments.html – Michael L Rhyndress Feb 22 '18 at 12:28

score 0 · Answer 4 · answered Feb 21 '18 at 14:31

0

You should move that client({method: 'GET', path: '/hello-world'}).done(response => {}) out of the render and into componentDidMount() so that it doesn't fire off on every re-render of the dom (ie if you make changes to said values).

You should also never mutate the state directly. Use this.setState(Object.assign({}, this.state, response.entity}); so that the React rendering engine can handle the re-write

answered Feb 21 '18 at 14:31

Keith V

680
4
13

Thank you for comment, I am appreciate. – RuF Feb 22 '18 at 08:46

score 0 · Answer 5 · answered Feb 21 '18 at 14:45

0

Although you can, it's not very common to have many entry points for react components in your page (The ReactDom.Render call). That is common pattern used by developers coming from Angular (as myself :) )

I would suggest you to IMPORT (or REQUIRE if you prefer) the filterList component inside the Test component and use it there .

I very good starting point for people learning react is the create-react-app project. I will setup most common config and scaffold some components in a neat way: https://github.com/facebook/create-react-app

answered Feb 21 '18 at 14:45

Anderson Luiz Ferrari

332
2
10

I deleted ReactDOM.render from test.js. Thank you for the link. – RuF Feb 22 '18 at 08:51
Nice!! React has a big learning curve, but it's to use it in the long term... Good luck in your project! :) – Anderson Luiz Ferrari Feb 23 '18 at 16:55

Why do not ReactJS render one component inside another?

5 Answers5