Redux-form-material-ui: Can't set a default value for SelectField

Created on 3 Jan 2017  路  4Comments  路  Source: erikras/redux-form-material-ui

As the title says, I'm trying to set an initial value for my select field component and it does not show up as selected when rendered.

If working, example should be added to the live demo.

All 4 comments

Having the same problem as we speak going to try to dig into it.

Ok found my issue I was passing immutable values to menuitems and my model had an inmutable value too so they are never the same.

Still don't know which is the clearest way to resolve this, probably something like having a function or prop to determine equality is the cleanest but it involves material-ui

Quick hack using ramda, you probably want to wrap select field to avoid boilerplate

    <Field
      name='foo'
      component={SelectField}
      hintText='Select Foo'
      floatingLabelText='Foo'
      format={value => findIndex(propEq('id', value.id))(fooList)}
      normalize={value => fooList[value]}
      fullWidth
    >
      {fooList.map((fooElement, i) => (
        <MenuItem
          value={i}
          primaryText={fooElement.name}
        />
      ))}
    </Field>

Edit: I ended up with something like this

```javascript
name='foo'
component={SelectField}
hintText='Foo'
floatingLabelText='Foo'
format={value => value && value.hasOwnProperty('id') ? find(propEq('id', value.id))(fooList) : null}
fullWidth
>
{fooList.map((foo) => (
key={foo.id}
value={foo}
primaryText={foo.name}
/>
))}

````

This library doesn't allow defaultValues.

You can read more about this here

Was this page helpful?
0 / 5 - 0 ratings