CODEWITHSUNDEEP
reactjsradio-button
Elder
Elder

Reputation: 363

Dynamic changing style of checked radio button in React

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.

Upvotes: 0

Views: 2024

Answers (1)

Root
Root

Reputation: 2361

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.

Upvotes: 1

Related Questions