CODEWITHSUNDEEP
reactjsmaterial-uiselection
snice
snice

Reputation: 99

MUI Selection of an Object (MUI: You have provided an out-of-range value)

I want to set a MUI Selection for a list of objects ([{name: "", id: "" }]).

The selection list should show the name and id of the object and the selected value should only show the name. The most important part is that I want to return the selected object with id and name in the onChange-handler.

I basically already got the solution what I want to have, but I can't get rid of the "You have provided an out-of-range value..." warnings. Is there a way to solve this or should I just ignore/disable this warnings?

A codesandbox-example of the component is found here

Upvotes: 0

Views: 1506

Answers (1)

szczocik
szczocik

Reputation: 1333

This is happening because you set a value on the MenuItem to a full object, while you pass a value into Select to be just a string. Change your MenuItem to this:

<MenuItem key={el.id} value={el.id}>

and the Select to this:

 <Select
          value={entityForm.entity.id}

And you will need to update your handle form code as well, but that would deal with that warning.

EDIT updated answer to use id rather than name

Upvotes: 1

Related Questions