I try to make my "smart" popup component, which can open inside itself some components, but my realization isn't good, because it doesn't work.
I use redux approach for creating popup and action of opening my popup is able to get name of any component for rendering before popup will be open;
But I've some problem, after getting parameter, in our case it's nameOfComponent, I need to choose and render component with name nameOfComponent.
And my question now, how do It can render component from array?
// He's my components
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';
const popupContent = {
Login : Login,
logout: Logout
};
// My component
class Popup extends Component {
componentDidUpdate () {
// for example
const nameOfComponent = "Login";
this.body = this.setBodyPopup(nameOfComponent);
return true;
}
setBodyPopup(property){
return popupContent[property];
}
render() {
// I want to render some element from popupContent here
<div>
// <this.body /> // it's jsx format
{this.body}
</div>
}
}