React-select onchange empty value

Hi,

I am using react select to chose a country, then update the state and send the form values to the next page. My value is always empty despite trying different methods to set it. Any recommendations of how i can set selected state using the name and value of the selected item will be appreciated.

My code

const handleUser = ({ target }) => {
    setUser({
      type: 'UPDATE_PERSONAL_INFO',
      payload: { [target.name]: target.value },
    })
  }

<Select
                    inputRef={ref}
                    options={options}
                    styles={customStyles}
                    className="basic-multi-select"
                    value={options.find(c => c.value === value)}
                    onChange={val => setUser(val.value)}
                    onDataChange={
                      (value, action) => {
                        this.setUser({
                          [action.country]: value
                        })
                      }
                    }
                    onChange={val => setUser({ country : {...val.value}})}
                    getOptionLabel={options => options.value}
                    getOptionValue={options => options.value}
                  />

Is val.value and object? I would have thought that that would be a primitive. Maybe you could do:

onChange={val => {
  console.log(typeof val.value, val.value)
  setUser({ country : {...val.value}})
}}
1 Like