How I can render react components without jsx format?

Question

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>
    }
}

Answer 1

I added working example here JSfiddle ReactJS

You dont have to use JSX. If you do, right way to do this is to use factory. You can also render regular HTML in the render method, as well as to use vanilla javascript in your code using curly braces.

Also to get I would recommend mapping and iterating through all your items in array and render them one by one in the render method

see example below:

var Login = React.createClass({
  render: function() {
    return <div>{this.props.name}, logged in</div>;
  }
});

// React with JSX
ReactDOM.render(<Login name="John" />,
  document.getElementById('containerJSX'));

// React without JSX
var Login = React.createFactory(Login);
ReactDOM.render(Login({ name: 'Tim' }),
  document.getElementById('containerNoJSX'));