redux form with multiselect from react-widgets

Question

I am using redux-form and react-widgets. My form has a multiselect field. My field in the form looks like this:

<Field
    valueField="id"
    textField="label"
    label="Target Cities"
    name="target_city_ids"
    component={MultiSelectField}
    data={cities.map(city => {'id': city.id, 'label': city.name })}/>

My MultiSelectField looks like this:

import React, { Component, PropTypes } from 'react';
import classNames from 'classnames'
import { Multiselect } from 'react-widgets'

const MultiSelectField = (field) => {
    let { input, label, meta: { error }, ...rest } = field

    let fieldClass = classNames({
        'form-group': true,
        'has-error': error
    })

    return (
        <div className={fieldClass}>
            <label className="control-label">{label}</label>
            <Multiselect
                className="rw-form-control"
                filter="contains"
                {...input}
                onBlur={() => input.onBlur()}
                value={input.value || []} // requires value to be an array
                {...rest}/>
            {error && <span className="help-block">{error}</span>}
        </div>
    )
}

At the moment, when I pick an option in the multiselect it saves the value for the field as an object:

{id:'x', label:'y'}

How can I make only the id be saved as the value, and not the whole object?

have you tried defining the valueField and textField of Multiselect? jquense.github.io/react-widgets/docs/#/multiselect/… — diedu
– diedu, Commented Dec 6, 2016 at 15:58
@Adam Did you ever find a solution to this? I am running into the same problem, everything looks how the docs say — John
– John, Commented Feb 6, 2017 at 19:25
@John In the end I couldn't, so before submitting the form to the API I altered it like target_city_ids: request.target_city_ids.map(city => city.id). Sorry I couldn't be more help! — Adam
– Adam, Commented Feb 7, 2017 at 19:15

SaidAkh · Accepted Answer · 2017-08-23 16:21:44Z

1

try to use valueField:

<Multiselect
    valueField="id"
/>

answered Aug 23, 2017 at 16:21

SaidAkh

1,8814 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

redux form with multiselect from react-widgets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related