Unable to make the Checkbox work with redux-form and react-semantic-ui

15,178

Solution 1

Reusable redux form checkbox with semantic ui

import React from 'react';
import { object } from 'prop-types';
import { Field } from 'redux-form/immutable';
import { Checkbox as CheckboxUI } from 'semantic-ui-react';
const Checkbox = ({
  input: { value, onChange, ...input },
  meta: { touched, error },
  ...rest
}) => (
  <div>
    <CheckboxUI
      {...input}
      {...rest}
      defaultChecked={!!value}
      onChange={(e, data) => onChange(data.checked)}
      type="checkbox"
    />
    {touched && error && <span>{error}</span>}
  </div>
);
Checkbox.propTypes = {
  input: object.isRequired,
  meta: object.isRequired
};
Checkbox.defaultProps = {
  input: null,
  meta: null
};
export default props => <Field {...props} component={Checkbox} />;

How to use?

import Checkbox from './Checkbox';
<form>
...
<Checkbox name="example" />
...
</form>

Solution 2

If you want to know whether the checkbox is checked or not, you have to use

onChange={(e, { checked }) => input.onChange(checked)}

instead of

onChange={input.onChange}

Here's a working example

Share:
15,178
Tushar Khatiwada
Author by

Tushar Khatiwada

I’m an experienced and ambitious web and mobile developer experienced in front end development technologies including Reactjs & React Native.

Updated on June 27, 2022

Comments

  • Tushar Khatiwada
    Tushar Khatiwada 12 months

    I'm trying to use redux-form with react-semantic-ui and is having trouble with the Checkbox component. The Checkbox is not being checked. I've followed the example from the redux-form documentation, but no luck. Here's the Code snippet :

    renderCheckBox = ({ input, label }) => {
      console.log(input.value);
      return (
        <Form.Field>
          <Checkbox
            label={label}
            checked={input.value ? true : false}
            onChange={input.onChange}
            />
        </Form.Field>
        );
    };
    <Field
      name="activated"
      label="Activate?"
      component={this.renderCheckBox}
    />
    

    The output of console.log(input.value) is empty.