title: Dynamic changing style of checked radio button in React
body: <p>I have 7 buttons radio types. Each button has a different style and it has to look different when <code>checked=true</code>. I want them to change their style when checked.
  This is my component responsible for creating a one button radio look</p>
  
  <pre><code>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 (
        &lt;InputGroup&gt;
          &lt;Input
            name={name}
            value={value}
            checked={checked}
            onChange={this.handleChange}
            style={{
              backgroundColor: checked ? `${backgroundColorChecked}` : `${backgroundColor}`,
              borderColor: `${borderColor}`,
              height: `${height}`,
              width: `${width}`,
            }}
            {...otherProps}
          /&gt;
        &lt;/InputGroup&gt;
      );
    }
  }
  </code></pre>
  
  <p>And this is my component responsible for creating a few button radio</p>
  
  <pre><code> &lt;FinalField name="rate"&gt;
            {({ input }) =&gt; (
              &lt;FormGroup&gt;
                &lt;RadioButton
                  value="capable"
                  type="radio"
                  backgroundColorChecked="#6baf8f"
                  backgroundColor="#f5fffa"
                  borderColor="#6baf8f"
                  height="1.8125rem"
                  width="1.8125rem"
                  {...input}
                /&gt;
              &lt;/FormGroup&gt;
            )}
          &lt;/FinalField&gt;
  </code></pre>
  
  <p>In the console I gets two errors <code>You must pass 'type="radio"' prop to your Field(rate) component.
  Without it we don't know how to unpack your 'value' prop - "undefined".</code>
  and <code>Failed prop type: The prop 'style' is marked as required in 'RadioButton', but its value is 'undefined'</code>.</p>
  
  <p>I do not know why these errors appear and how to fix them.Thanks for all the tips.</p>