Same same but different - post

CountryAddressForm.js

// CountryAddressForm.js

return (
    <form
      className="country-form"
      action="#"
      method="post"
      onSubmit={this.handleSubmit.bind(this)}
      onChange={this.handleChange.bind(this)}>
          
      <CountrySelector countries={countries} />
        
      {children(this.state)}

      <button>Submit</button>
    </form>
  );
}

CountryFieldsFactory.js

// CountryFieldsFactory.js
// import addresses fields set...

const ADDRESS_FIELDS = {
  DE: PostCodePriorAddress,
  SE: PostCodePriorAddress,
  SP: RegionAddress,
  IT: RegionAddress,
  IE: IrishAddressFields,
  BR: BrazilianAddressFields,
};

// USAGE:
//
// <CountryAddressForm>
//   {state => <CountryFields {...state} />}
// </CountryAddressForm>
export function CountryFields({country, ...props}) {
  const Fields = ADDRESS_FIELDS[country] || GeneraInternationalAddress;
  const regions = formatRegions(COUNTRY_REGIONS[country]);

  return <Fields {...{...props, regions, country}} />;
}

// It can be used as a simple function too :)
//
// USAGE:
//
// <CountryAddressForm>
//   {fieldsFactory}
// </CountryAddressForm>
export default function fieldsFactory({country, ...props}) {
  const fields = ADDRESS_FIELDS[country] || GeneraInternationalAddress;
  const regions = formatRegions(COUNTRY_REGIONS[country]);

  return React.createElement(fields, {...props, regions, country});
}

CountryFieldsFactoryUsage.js

// Usages
return (
  <div className="App">
    <CountryAddressForm>
      {state => <CountryFields {...state} />}
    </CountryAddressForm>
  </div>
)