React component in component - reactjs

Question

I'm trying to do a <DropdownLink /> inside a <BootstrapDropdown /> in my code, but I dunno how to.
I've tried to solve the problem with React documentation, but I didn't find anything.
App.js
import React from 'react';
import '../scss/app.scss';
import BootstrapDropdown from './helpers/bootstrapDropdown';
import DropdownLink from './helpers/dropdownLink';
function App() {
return (
<div className="App">
<BootstrapDropdown name={"Dropdown"}>
<DropdownLink name={"Strona główna"} href={"/"} />
</BootstrapDropdown>
</div>
);
}
export default App;
dropdownLink.js
import React from 'react';
class DropdownLink extends React.Component {
render() {
return <a className="dropdown-item" href={this.props.href}>{this.props.name}</a>
}
}
export default DropdownLink;
bootstrapDropdown.js
import React from 'react';
class BootstrapDropdown extends React.Component {
render() {
return <div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{this.props.name}
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
}
}
export default BootstrapDropdown;
I want to show a <DropdownLink /> inside a <div className="dropdown-menu"></div> in <BootstrapDropdown />.

Answer 1

You need to explicitly tell where to render the children:
import React from 'react';
class BootstrapDropdown extends React.Component {
render() {
return <div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{this.props.name}
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
{this.props.children}
</div>
</div>
}
}
export default BootstrapDropdown;