Re-Render Material-Ui's Select Option

Question

How can I re render the <option> </option> inside material ui select?

What I am trying to do is moving data from 1 object array to the next using material ui select

{transferData.map(data => (
   <option key={some key value} value={some value}>
      {data.name}
   </option>
 ))}

I console.log transferData where I execute the handler and the console shows that the object array is updating per onClick, but the data is not rendering to the screen. It still shows the initial empty option list.

So I have 3 object array.
Array1 - hold data
Array2 - hold the selected data from material ui select
Array3 - after onClick, move data from array2 to array3

UPDATE*
When transfer data over to array3, the option has this invisible option that I can click on but I don't see the same text as in array1

Answer 1

It sounds like you're passing some arbitrary values to key={some key value}. This could be the issue.

You should be passing any unique value that is related to the array object that it's being mapped to:

{transferData.map(data => (
   <option key={data.id} value={data.id}> <--- pass the ID to key
      {data.name}
   </option>
 ))}

That way, when the value of transferData changes from a blank array [] to an array of objects [{id: 'foo', name: 'Foo'}], React understand it has to update the UI.

Please read the React docs on Keys for more info.