Render component in component dynamically - reactjs

Question

My app has 2 components: Location and User.
The locations are rendered when the page is loaded. Some locations have users. These users are loaded via an ajax call after the locations are rendered.
I wonder how I can render (conditionally) the user inside a location when that user is assigned to a location.
<App>
<location id="1" />
<location id="2" />
<Location id="3">
<User loactionId="3">
</User>
</Location id="4">
</App>

Answer 1

You can render Component dynamically using following example:
Method 1:
Here is the Location Component:
import React from "react";
import {User} from "./User";
export class Location extends React.Component {
render() {
return (
<div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
This is Location Component {this.props.value}
{
this.props.user? <User/> : " No User Component"
}
</div>
);
}
}
Here is the User Component:
import React from "react";
export class User extends React.Component {
render() {
return (
<div style={{background: '#A0CFEC', padding: 20, color:'#000000'}}>
This is User Component
</div>
);
}
}
App Component:
import React from "react";
import ReactDOM from 'react-dom'
import {Location} from "./parent-child/Location";
class App extends React.Component {
render() {
return (
<div>
<Location user={true} value={1}/>
<Location user={false} value={2}/>
<Location user={true} value={3}/>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
export default App;
Method 2:
You can replace location Component with below code. Here I used React.createElement method to create Component dynamically.
import React from "react";
import {User} from "./User";
export class Location extends React.Component {
render() {
return (
<div style={{margin:20, padding:20, color: '#FFFFFF', background: '#368BC1'}}>
This is Location Component {this.props.value}
{
this.props.user? React.createElement(User, {propValue: 'Hello World'}, null) : " No User Component"
}
</div>
);
}
}