Radio button not working

Viewed 12304

I have created a radio component but when clicked it does'nt show checked here is the code

import React from 'react';
import classnames from 'classnames';

const RadioButton = (field) => {

  const inputClasses = classnames('form-group  has-feedback  ',{
    'has-error': field.meta.touched && field.meta.error,
  });
  return(
    <div className={inputClasses}>
        <label className="radio-inline custom-radio nowrap">
        <input
          disabled={field.disabled}
          type="radio"
          name={field.input.name}
          value={field.input.value}
          defaultChecked={field.defaultChecked}
          {...field.input}
        />
        <span>{field.label}</span>
      </label>
    </div>
  );
};

export default RadioButton;

here is the field:

                      <Field
                        label="True"
                        component={RadioButton}
                        name="True"
                        type="radio"
                        value={true}
                       defaultChecked={ true }
                      />
                      <Field
                        label="False"
                        component={RadioButton}
                        name="False"
                        type="radio"
                        value={false}
                        defaultChecked={ false }
                      />

this is the warning i am getting on console: Warning: RadioButton contains an input of type radio with both checked and defaultChecked props. Input elements must be either controlled or uncontrolled (specify either the checked prop, or the defaultChecked prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props

can anyone help me out with this?

2 Answers
Related