Dropdown Component does not change on Props change

Question

I'm displaying a Dropdown like this:

<DropdownMultiselect options={chartVariables} />

Even though chartVariables is a State and properly get's updated, the options for the Dropdown do not change, when the chartVariables get's updated.

The source code for the dropdown you can find here: https://github.com/kfrancikowski/react-multiselect-dropdown-bootstrap/blob/master/src/index.js

Can you help me to find out why the options do not change when chartVariables changes? Do I have to fix this library or can I just "force" this DropdownMultiselect to re-render?

Answer 1

These two approaches mentioned can help you :-

• https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
• https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization

Briefly describing as per my understanding :-

As chartVariables is in the parent component and is being passed as a prop to DropdownMultiselect which is updating its state options, hence the states in the child component do not update everytime whenever the value of the props from parent changes , they needs to be updated forcefully .

I have tried using the first approach and it is working as expected ,

static getDerivedStateFromProps(props, state) {
    
    if (props.options !== state.options) {
      let optionsArray = [];
      if (typeof props.options[0] === "object") {
        props.options.map((value, index) => {
          let key = value[props.optionKey];
          let label = value[props.optionLabel];

          optionsArray.push({ key: key, label: label });
        });
      } else if (typeof props.options[0] === "string") {
        props.options.map((value) => {
          optionsArray.push({ key: value, label: value });
        });
      }

      return {
        options: optionsArray
      };
    }

    return null;
  }

Sandbox link :- https://codesandbox.io/s/wizardly-rain-zbf7e?file=/src/DropdownMultiSelect.js