CR-user-form.jsx

const UserForm = ({ onChange, values }) => (
  <div>
    <h1>User</h1>
    <div>
      <div className="row">
        <div className="form-group">
          <label>Name</label>
          <input type="text" name="name" value={values.name} onChange={onChange} />
        </div>
        <div className="form-group">
          <label>Email</label>
          <input type="email" name="email" value={values.email} onChange={onChange} />
        </div>
      </div>
      <div className="row">
        <div className="form-group">
          <label>Country</label>
          <CountrySelector name="country" value={values.country} onChange={onChange} />
        </div>
        <div className="form-group">
          <label>Province</label>
          {values.country
            ? <ProvinceSelector name="province" value={values.province} onChange={onChange} />
            : <span>Select a country first</span>
          }
        </div>
      </div>
    </div>
  </div>
);