DropDown State not preserving in React

Question

I have A react DropDown Component as shown below:

Everything works fine when I make selections as shown below:

Reproduction Link

Now here comes the problem, my dropdown open close handler works but each time it closes and reopens the previous values, even though they're preserved in console log but they don't show up in UI.

DropDownControlHandler = (handleElem) =>
    {
        const newState = this.state;
        
        newState.isDropDownOpen = handleElem; 

        console.log(this.DropDownElements);
 
        this.setState({state: newState,DropDownElements: this.DropDownElements});
        //this.CheckBoxChangeHandler(-10,this.DropDownElements);
        

    }

    CheckBoxChangeHandler = (index) => {

        
        let newData = this.DropDownElements;
        if(!this.state.isMultiSelectOn)
        { 
            console.log("Executing if");
            newData = this.ClearAllElements;
            console.log(newData);
        }

        newData[index].isChecked = !(newData[index].isChecked);
        console.log("New Data:- ");
        console.log(newData);
        this.setState({DropDownElements: newData});
        

    }

Can someone help me here? Here is the reproduction link.

End Goal: On Closing and opening dropdown, the data should preserve and when isMultiSelectOn false then only one selection should happen and not others.

Answer 1

The data is already preserved, it is not being reflected on the ui because you are not adding the true value in its checked property, See the code below I have added the checked property now it is clearly reflected in the ui.

const DropDownBoxComponents = this.DropDownElements.map(

  (element, index) => {

    return (

      <div className={classes.DropDownContainer} key={element.id}>

        <input

          type="checkbox"

          className={classes.CheckBox}

          onChange={() => {

            this.CheckBoxChangeHandler(index);

          }}

          value={element.isChecked}

          checked={element.isChecked} // this is what you need to add

        />

        <div className={classes.CheckBoxElement}>{element.value}</div>

      </div>

    );

  }

);

I can't find isMultiSelectOn option in the ui so I can't tell the solution to that part of the question, but that ui part will work now on opening and closing the dropdown