const SUBSCRIPTION_TYPE = {
  basic: "basic",
  premium: "premium"
};
const SUBSCRIPTION_RADIO_GROUP = "subscription";

function Radio({ value, label, name, isChecked, onChange }) {
  return (
    <label>
      <input
        type="radio"
        value={value}
        name={name}
        onChange={onChange}
        checked={isChecked}
      />
      {label}
    </label>
  );
}

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedSubscriptionType: SUBSCRIPTION_TYPE.premium
    };
  }

  handleChange = (e) => {
    this.setState({
      selectedSubscriptionType: e.target.value
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    alert(
      `Selected subscription type: ${this.state.selectedSubscriptionType}`
    );
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <span>Subscription type:</span>
          <Radio
            value={SUBSCRIPTION_TYPE.basic}
            label="Basic"
            name={SUBSCRIPTION_RADIO_GROUP}
            isChecked={
              this.state.selectedSubscriptionType === SUBSCRIPTION_TYPE.basic
            }
            onChange={this.handleChange}
          />
          <Radio
            value={SUBSCRIPTION_TYPE.premium}
            label="Premium"
            name={SUBSCRIPTION_RADIO_GROUP}
            isChecked={
              this.state.selectedSubscriptionType === SUBSCRIPTION_TYPE.premium
            }
            onChange={this.handleChange}
          />
          <br />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById("root"));