title: React - execute a function on default value change
body: <p>I want to show a save button if the radio button value changes from it's default value. Lets say default value is 'red'. User changes from red to green I want to show a save button. Lets say user again changed to red before saving green option then I don't want to show it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  /*  Renders a radio group */
  class Radio extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selected: props.selected
      };
      this.onChange = this.onChange.bind(this);
    }
  
    onChange(ev) {
      this.setState({ selected: ev.target.value });
      this.props.onChange(ev);
    }
  
    render() {
      const {
        options, inputClasses, labelClasses, hiddenLabel, name, inline
      } = this.props;
      return (
        &lt;div className={`radio-group ${inline ? 'inline-radio-group' : ''}`}&gt;
          {
            options.map((option) =&gt; {
              const {
                id, value, label
              } = option;
              return (
                &lt;div className="radio" key={`${id}`}&gt;
                  &lt;input
                    type="radio" id={id} className={`radio-input ${inputClasses}`}
                    name={name} value={value} onChange={this.onChange}
                    checked={this.state.selected === value ? 'checked' : ''}
                  /&gt;
                  &lt;label htmlFor={id} className={`radio-label ${labelClasses} ${hiddenLabel ? 'sr-only' : ''}`} &gt;
                    {label}
                  &lt;/label&gt;
                &lt;/div&gt;);
            })
            }
        &lt;/div&gt;
      );
    }
  }
  
  Radio.propTypes = {
    options: PropTypes.arrayOf(PropTypes.shape({
      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]).isRequired,
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    })).isRequired,
  
    name: PropTypes.string.isRequired,
  
    selected: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
  
    inputClasses: PropTypes.string,
  
    labelClasses: PropTypes.string,
  
    hiddenLabel: PropTypes.bool,
  
    onChange: PropTypes.func,
  
    inline: PropTypes.bool
  };
  
  Radio.defaultProps = {
    selected: '',
    inputClasses: '',
    labelClasses: '',
    hiddenLabel: false,
    inline: false,
    onChange: () =&gt; { }
  };
  
  export default Radio;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Fragment } from 'react';
  import PropTypes from 'prop-types';
  import Radio from '/Radio';
  
  const DOContainer = () =&gt; {
    const options = [
      {
        id: 'red',
        label: 'Red',
        value: 'red'
      },
      {
        id: 'green',
        label: 'Green',
        value: 'green'
      }
    ];
  
    return (
      &lt;Fragment&gt;
        &lt;div className="do-container"&gt;
          &lt;h2&gt;choose a color&lt;/h2&gt;
          &lt;div&gt;
            &lt;p&gt;color choose&lt;/p&gt;
            &lt;Radio
              options={options} name="do" inline
              selected="red"
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  };
  
  export default DOContainer;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have updated my Radio component.</p>