How can i populate a DropdownList Options in React without states?

Question

I dont want to use states because this is my 2nd dropdown and its connected to the first one. And i found out when i do this.setstate(...); react is re-render and its breaks my first dropdownlist every selected forms are unselecting. So i want to use this:

const data =[{
   "tablename": "demo_1",
   "segments": "asd"
},
{
   "tablename": "demo_2",
   "segments": "dsa"
}];

And i want something simple like this:

Is it possible to do that ? I searched but cant find a decent answer.

Answer 1

It sounds to me like your component state doesn't live high enough in your component hierarchy. Try storing state in a parent component, and passing it down to your drop downs as props.

Answer 2

It's not recommend,but if you have to keep the two dropdown,you may try shouldComponentUpdate to prevent the re-render.Here is an example.

 shouldComponentUpdate(nextProps, nextState) {
    if (this.state... == nextState...) {
      return false;
    }
    return true;
  }