React: Invariant Violation (without table)

Question

I have looked some answer in stackoveflow. But most of them have something todo with <table> and <tbody>. But my problem is nothing to do with that.

I render this <GISMapDropdownMenu> component using ScriptjsLoader of react-google-maps library.

    initialCustomSetup: function() {
    let GISMapDropdownMenu = this.refs.cornermenu;
        if (googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].j.length === 0) {// push only once
          googleMapInstance.props.map.controls[google.maps.ControlPosition.TOP_LEFT].push(GISMapDropdownMenu);
          GISMapDropdownMenu.style.zIndex = 1;
          GISMapDropdownMenu.style.display = 'inline-block';
      }
    },
    render: function() {
      return(
        <ScriptjsLoader

         **** some setup ****               
          googleMapElement={
            <GoogleMap
              ref={googleMap => {
                if (googleMap) {
                  googleMapInstance = googleMap;
                  layerType = self.props.layerType;
                  self.initialCustomSetup();
                }
                return;
              }} >
               <GISMapDropdownMenu
                ref="cornermenu"
                availableDesa={self.props.availableDesa}
                availableDesaColor={self.props.availableDesaColor} />
               {self.props.children}
            </GoogleMap>
          }
        />);

Here is the implementation of GISMapDropdownMenu.

<div className="gmnoprint GISMap-dropdownmenu" style={{display: 'none'}}>
  <div>
    <div ref="icon" className="GISMap-dropdownmenu--icon" onClick={this.handleIconClick}>
      <img src={BurgerIcon} draggable="false" />
    </div>
    <div ref="content" className="GISMap-dropdownmenu--content" style={{display: 'none'}}>
      <div className="GISMap-dropdownmenu--content_header">
        <div className="GISMap-dropdownmenu--content_header__title">List of Desa ({number_of_desa})</div>
        <div className="GISMap-dropdownmenu--content_header__cross" onClick={this.handleCrossCLick}>
          <img src={CrossIcon} draggable="false" />
        </div>
      </div>
      <div className='GISMap-dropdownmenu--content_list'>
        {array_div_element_inrange_assigned_desa}
        {array_div_element_inrange_desa}
        {array_div_element_assigned_desa}
      </div>
    </div>
  </div>
</div>

{array_div_element_something} is array of this.

<div key={"desa_name-"+desa.desa_name} className={"GISMap-dropdownmenu--content_list__"+desa_color.status}>Desa {desa.desa_name}</div>;

I got this error when use <GISMapDropdownMenu /> component.

Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 97 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser),

I realised something:
I move the DOM of <GISMapDropdownMenu /> component after mounted. Because I need it to be in the top left of google map.

Any suggestion?

Answer 1

Potential problems: First off, these are guesses as I don't do React all the time, but having said that, here are some possible causes of this:

1) Unmounting components:

This probably means that setState is being called in a callback that was firing after the component that initially started the request has already been unmounted from the dom.

More details on this type of error

2) Having incomplete HTML tags in your markup

For example, adding a <p> tag without the closing </p>. The browser likes all html tags to be complete, so if it doesn't see an end tag for something, it'll add it. Try getting the HTML of your resulting component and comparing it to what you expect. Also remove the child components bit by bit (e.g. remove ) to see when it starts to work so you know what causes this problem. Your html from what I can see doesn't cause this.

3) Build your child components before rendering

Maybe you need to do as this similar answer does

4) Changing the DOM using something other than React

Is your page using jquery or something to change this component in anyway? ie bind events or add/remove anything? If so, this can be causing that as well. Try disabling this and see if it solves the problem

If none of the above help, I'd suggest adding a JSFiddle so people can see what the problem is for sure.