react - onchange of select unable to call second component from first in existing website

const e = React.createElement;

class DownloadCenter extends React.Component {

    constructor(props) {
        super(props);

        this.state={
            productDownloadList : []
        }
    }

    componentDidMount() {
        debugger;
        $("#select_productLine13").select2();
        axios({
            method: 'POST',
            url: 'http://localhost:8082/mysoftware/support/pdapi/getProductLines',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: {}

        })
            .then(response =>{
                console.log(response)
                /*#__PURE__*/

                this.setState({productDownloadList : response.data.productLineDTOList})

            })
            .catch(
                error => {
                    console.log(console.log(error))
                }
            );

    }

    render() {
        debugger;

        const {productDownloadList} = this.state
        let productDownloadList1 = productDownloadList.length > 0 && productDownloadList.map((item, i) => {
            return /*#__PURE__*/React.createElement("option", {
                key: i,
                value: item.productLineId
            }, item.productLineName);
        }, void 0);

        return React.createElement("div", {
            class: "fl"
        }, /*#__PURE__*/React.createElement("select", {
            id: "select_productLine13",
            name: "selDataVal",
            onChange: this.aa

        }, productDownloadList1));
     }


}

$("#select_productLine13").on("change", function () {

    debugger;
    console.log("anc")
    /*#__PURE__*/
    React.createElement(DownloadCenter1, null);

})






export default DownloadCenter ;

const domContainer = document.querySelector('#select_productLine13');
const root = ReactDOM.createRoot(domContainer);
root.render(e(DownloadCenter));


---------------------------jsp file which calling above js-------------------------

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="module"  src="<c:url value="/resources/js/reactjs/download_center.js"/>" ></script>
<script type="module"  src="<c:url value="/resources/js/reactjs/download_center1.js"/>" ></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>




------------------------------download_center1.js-----------------------------------

"use strict";
const e = React.createElement;

class DownloadCenter1 extends React.Component {

    constructor(props) {
        super(props);

        this.state={
            productDownloadList : []
        }
    }

    componentDidMount() {
        debugger;
        $("#select_productLine13").select2();
        axios({
            method: 'POST',
            url: 'http://localhost:8082/mysoftware/support/pdapi/downloadCenter/productNames',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: {}

        })
            .then(response =>{
                console.log(response)
                /*#__PURE__*/
                this.setState({productDownloadList : response.data.productLineDTOList})
            })
            .catch(
                error => {
                    console.log(console.log(error))
                }
            );

    }

    render() {
        console.log("inside");
        return ;
        //return React.createElement("div", {value: "Hi"});
        /*#__PURE__*/
        //React.createElement(DataTable, {
        //    title: "Desserts",
        //    selectableRows: true
        //});
    }

}

export default DownloadCenter1 ;
const domContainer = document.querySelector('#select_productLine112');

const root = ReactDOM.createRoot(domContainer);

root.render(e(DownloadCenter1));

Comments

[kapsebharat1]

I rendered one component in my existing site with above code but when I am trying to load second component on change of first , it is not allowing