Handle Field of type select

[hamdinh98]

hello, community,
I've faced a problem when I'm using this dependency,
I want to use a Field of type select that contains values retrieved from the database
So any idea to handle this issue?

[HorLukRos]

I'd also like to know how to do this properly - for the exact same use case.

So far I've managed to render the input field using the "render" attribute on Field like this:

<Field name="parent" label="Parent" render={ 
	field =><FormControl fullWidth variant="standard">
		<Select {...field}>
			{ this.state.tags.map(tag => {
				return (<MenuItem value={tag.id!}>{tag.name}</MenuItem>)
			})}
		</Select>
	</FormControl>
}/>

(I'm using MUI, the default component would be different - probably just <select> and <option>.)

The code above is OK, but then the serialization does not work properly - in the onSubmit method the model attribute "parent" is empty. It's hard to tell how to use the render attribute properly without some sort of interface or something...

[HorLukRos]

I've rewritten it using regular select and options and it appears to be working:

const SelectRenderer = ({ field }) =><select {...field}>
	{ this.state.tags.map(tag => {
		return (<option value={tag.id!}>{tag.name}</option>)
	})}
</select>;

(then just use render={SelectRenderer}). So maybe the MUI component is breaking the functionality.

[Cooksen]

Hey @hamdinh98 I don't know if you have solved this problem yet but I somehow found a way to solve this.
I add this line right before the tag:
depart.length !== 0 && <>
like this:

       {depart.length !== 0 && <>
      <CRUDTable
          caption="Crud table"
          fetchItems={(payload) => service.fetchItems(payload)}
      >
      <Field
            name="department_name"
            label="department"
            render={
              SelectionRender
            }
                    />

depart is the list of data that I retrieved from DB. in this way I think React can set state first then the crud table would be created.
this should work!