CODEWITHSUNDEEP
redux-formsemantic-ui-react
Son Dang
Son Dang

Reputation: 153

semantic-ui-react dropdown in redux-form onChange didn't work to update state

I got an issue that the redux didn't get onChange value state (state equal)

Here is my code

ReduxFormDropdown.js

import React from 'react'
import { PropTypes } from 'prop-types'
import { Icon, Dropdown } from 'semantic-ui-react'
import FormLabel from '../FormLabel'

export const ReduxFormDropdown = ({
  input,
  label,
  placeholder,
  meta: {
    error,
    touched,
  },
  ...custom
}) => {
  const errorMessage = (
    <div style={{ color: '#E20000', paddingTop: '.3rem', fontSize: '12px' }} >
      <Icon name="warning" />
      {error}
    </div>
  )

  return (
    <div>
      <FormLabel>{label}</FormLabel>
      <Dropdown
        placeholder={placeholder}
        value={input.value}
        onChange={(param, data) => props.input.onChange(data.value)}
        error={touched && error}
        selection
        {...input}
        {...custom}
      />
      {touched && error && errorMessage}
    </div>
  )
}

ReduxFormDropdown.propTypes = {
  input: PropTypes.object.isRequired,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string,
  }),
}

Form.js

//...      
const genders = [
  {
    key: '1',
    text: 'Male',
    value: 'male',
  },
  {
    key: '2',
    text: 'Female',
    value: 'female',
  },
  {
    key: '3',
    text: 'Other',
    value: 'other',
  },
]
//...    

<Form.Field>
  <Field
   name="gender"
   component={ReduxFormDropdown}
   placeholder="Gender"
   options={genders}
  />
</Form.Field>
//...

The value did not change when I selected and when I checked redux dev tool I found that the value did not get update (state equal). What was I missing? Thank you for your response.

Upvotes: 1

Views: 1474

Answers (1)

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

I've highlighted the most important lines:

<Dropdown
  onChange={(param, data) => props.input.onChange(data.value)}
  {...input}
/>

props.input and input are same objects that contains onChange function. So when you're spreading the input object to a Dropdown component, you're overriding an onChange handler.

The correct usage is:

<Dropdown
  {...input}
  onChange={(param, data) => props.input.onChange(data.value)}
/>

Upvotes: 3

Related Questions