How I can render react components without jsx format?

Viewed 6245

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>
    }
}
5 Answers
Related