Dynamic changing style of checked radio button in React

Question

I have 7 buttons radio types. Each button has a different style and it has to look different when checked=true. I want them to change their style when checked. This is my component responsible for creating a one button radio look

class RadioButton extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    const { checked } = this.state;
    this.setState({
      checked: !checked,
    });
  }

  render() {
    const {
      value,
      name,
      backgroundColor,
      backgroundColorChecked,
      borderColor,
      height,
      width,
      ...otherProps
    } = this.props;
    const { checked } = this.state;
    return (
      <InputGroup>
        <Input
          name={name}
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          {...otherProps}
        />
      </InputGroup>
    );
  }
}

And this is my component responsible for creating a few button radio

 <FinalField name="rate">
          {({ input }) => (
            <FormGroup>
              <RadioButton
                value="capable"
                type="radio"
                backgroundColorChecked="#6baf8f"
                backgroundColor="#f5fffa"
                borderColor="#6baf8f"
                height="1.8125rem"
                width="1.8125rem"
                {...input}
              />
            </FormGroup>
          )}
        </FinalField>

In the console I gets two errors You must pass 'type="radio"' prop to your Field(rate) component. Without it we don't know how to unpack your 'value' prop - "undefined". and Failed prop type: The prop 'style' is marked as required in 'RadioButton', but its value is 'undefined'.

I do not know why these errors appear and how to fix them.Thanks for all the tips.

Root · Accepted Answer · 2018-12-13 14:37:02Z

1

You must pass 'type="radio"' prop to your Field(rate) component.

This problem means that you need to add 'type="radio"' to input element in class RadioButton.

<Input
          type="radio"
          name={name}
          value={value}
          checked={checked}
          onChange={this.handleChange}
          style={{
            backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
            borderColor: `${borderColor}`,
            height: `${height}`,
            width: `${width}`,
          }}
          {...otherProps}
        />

Failed prop type:

I assume that you have defined propType in class RadioButton like this:

RadioButton.protoTypes = {
    style: ProtoTypes.object.isRequired
}

However,the style property isn't passed to the class RadioButton.

edited Dec 13, 2018 at 14:37

answered Dec 13, 2018 at 14:32

Root

2,3611 gold badge13 silver badges14 bronze badges

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

7 Comments

Elder Over a year ago

no, that RadioButton.propTypes = { value: PropTypes.string.isRequired, name: PropTypes.string.isRequired, style: PropTypes.shape({ backgroundColor: PropTypes.string.isRequired, borderColor: PropTypes.string.isRequired, height: PropTypes.string.isRequired, width: PropTypes.string.isRequired, }).isRequired, };

Root Over a year ago

you have defined style in RadioButton.propTypes.But it's not passed in <RadioButton/>

Elder Over a year ago

one problem solved - prop type: The prop 'style' is marked as required in 'RadioButton', but its value is 'undefined'

Root Over a year ago

Where are are getting your Input element?The original input Element should be input not Input.

Elder Over a year ago

i have component QuestionsList.js and gets the data and transfers it as props QuestionsListItem.js and the radio button is transferred to this component

|

Collectives™ on Stack Overflow

Dynamic changing style of checked radio button in React

1 Answer 1

You must pass 'type="radio"' prop to your Field(rate) component.

Failed prop type:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You must pass 'type="radio"' prop to your Field(rate) component.

Failed prop type:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related