CODEWITHSUNDEEP
javascriptreactjs
RuF
RuF

Reputation: 558

Why do not ReactJS render one component inside another?

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?

Upvotes: 0

Views: 1220

Answers (5)

Anderson Luiz Ferrari
Anderson Luiz Ferrari

Reputation: 341

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

Upvotes: 0

Keith V
Keith V

Reputation: 730

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

Upvotes: 0

Michael L Rhyndress
Michael L Rhyndress

Reputation: 105

To avoid the extra div markup you could simply use:

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

Upvotes: 0

Lucas Charvolin
Lucas Charvolin

Reputation: 327

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

Upvotes: 3

Adarsh
Adarsh

Reputation: 827

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.

Upvotes: 1

Related Questions