How to Render React Component Without JSX Format?

To render React components dynamically without relying directly on JSX, you can utilize React’s createElement API. Your approach to maintaining a mapping (popupContent) of component names to components is a good start. Here’s how you can adjust your Popup component to work properly:

Sample Code:-

import React, { Component } from 'react';
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';

const popupContent = {
    Login: Login,
    Logout: Logout,
};

class Popup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            componentName: null, // To hold the name of the component to render
        };
    }

    componentDidUpdate(prevProps, prevState) {
        const nameOfComponent = "Login"; // Example: This would come from Redux in your case

        if (prevState.componentName !== nameOfComponent) {
            this.setBodyPopup(nameOfComponent);
        }
    }
    setBodyPopup(nameOfComponent) {
        // Update state with the component name
        this.setState({ componentName: nameOfComponent });
    }
    render() {
        const { componentName } = this.state;

        // Fetch the component class from popupContent using the componentName
        const ComponentToRender = popupContent[componentName];

        return (
            <div>
                {ComponentToRender 
                    ? React.createElement(ComponentToRender) 
                    : <p>No component to display</p>}
            </div>
        );
    }
}
export default Popup;

Alternative with Functional Component and Redux

If you’re using Redux, you could achieve a cleaner implementation using a functional component and the useSelector hook:

import React from 'react';
import { useSelector } from 'react-redux';
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';

const popupContent = {
    Login: Login,
    Logout: Logout,
};

const Popup = () => {
    const componentName = useSelector((state) => state.popup.componentName); // Redux state
    const ComponentToRender = popupContent[componentName];

    return (
        

            {ComponentToRender 
                ?  
                : 
No component to display
}
        
    );
};
export default Popup;

Benefits of This Functional Approach:

• Simpler and more concise.
• Redux integration directly into the component without lifecycle methods.
• Automatically re-renders when Redux state changes.