react - onchange of select unable to call second component from first in existing website
Published: 2022-09-05 03:34:05

   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));