Twice componentDidMount is getting called -(c#-MVC ,react and external babel.js )
Published: 2021-09-22 08:33:19

**Twice componentdiMount is getting called (c#-MVC ,react and external babel.js )**



In my project, for few old modules, we are still using external babel.js file
So basically we are integrating c#-MVC, react

I am dividing the question into three parts ,

 1. Layout Page C#

 _ListLayoutV2.chtml side I have one page , through which I am including babel.js 

    <script src="https://cdn/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
      <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>


 2. List Page C#

On List page I am including one CarContainer.jsx file
The List page looks like this ,

    @using Domain.Vault;
    @{
    	ViewBag.Title = @Resource.CarList;
    	Layout = "~/Views/Shared/_ListLayoutV2.cshtml";
    	SiteContext siteContext = WebUtils.GetSiteContext(new HttpContextWrapper(HttpContext.Current));
    }
    
    @Html.Hidden("hdnGotIt", Resource.GotIt)
    @section sectionMain
    {
    	
    	<script type="text/jsx" src="~/Scripts/Area/Travel/Car/CarContainer.jsx">
    
    
    	</script>
    	<div id="main"></div>
    }
    @section sectionRightSide
    {
    	@Html.Hidden("hdnDomainUrl", "https://" + Request.Url.Authority)
    }

 3. React Side react

    

const BLUE_TEXT_COLOR = "#31a8dc";

    var completeRecordCount = 0;
    const REQ_ID = "requestID";
    let isfetchInProcess = true;
    class CarContainer extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                isDataLoaded: false,
                cardata: { content: [] },
                carMatrixData: [],
                isLoading: true,
                currentPage: 1,
                pageSize: 20,
                totalPage: 1,
                carFilter: [],
                carResponses: {},
                brandSort: [{ 'type': 'price', 'order': 'asc' }],
                priceHeaderSelected: false,
                nonFilteredRecordCount: 0,
                filterType: 'none',
                searchType: 'Airport',
                cacheInterval: [],
                resultCount: 0,
                isMoreResultsAvailable: true,
            };
    
            this.payLaterInterval = 0;
            this.payLaterCount = 0;
        }
        componentDidMount() {
            $('body').addClass('car-list-page');
            if (location.href.indexOf("requestID=0") > 0) {
                //this.searchCarFromList();
            }
            else {
                console.log('componentDidMount')
    
               // this.loadLegResults();
            }
        }
    
        componentDidUpdate() {
        }
    
       
    
        render() {
            
            return (
                <React.StrictMode>
                    Hello
               
                    </React.StrictMode>
            );
        }
    }
    
    const containerElement = document.getElementById("main");
    ReactDOM.render(<CarContainer />, containerElement);




The screenshot of the chrome browser 
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/ozJvQ.png



**How can we solve this, so we can call componentdiMount only once**