Same same but different - post

AGeneraInternationalAddress.js

// This is the common field set free of country specific things.

function GeneralInternationalAddress(props) {
  return (
    <Fragment>
      <AddressLineInput value={props.address_line} />
      <AddressLineInput
        name="address_line2"
        value={props.address_line2}
        optional
      />
      <PostCodeInput value={props.post_code} />
      <CityInput value={props.city} />
    </Fragment>
  );
}

export default GeneralInternationalAddress;

ARegionAddress.js

function RegionAddress(props) {
  return (
    <Fragment>
      <AddressLineInput value={props.address_line} />
      <AddressLineInput
        name="address_line2"
        value={props.address_line2}
        optional
      />
      <PostCodeInput type="text" value={props.post_code} />
      <CityInput value={props.city} />
      <RegionSelector regions={props.regions} />
    </Fragment>
  );
}

export default RegionAddress;

BrazilianAddressFields.js

// This is one example when you can't make it generic. Sometimes the
// requirements are so weird it's better to have some duplication than
// contaminating all your components with country specific logic :/

import COUNTRY_STATES from './country-states'

function BrazilianAddress(props) {
  const states = Object.keys(COUNTRY_STATES).map(code => ({
    code,
    name: COUNTRY_STATES[code],
  }));

  return (
    <Fragment>
      <AddressLineInput value={props.address_line} />
      <WarningMessage 
        visible={props.address_line && !props.street_no} 
        text='My message' />
      <StreetNumberInput value={props.street_no} />
      <AddressLineInput
        name="address_line2"
        value={props.address_line2}
        optional
      />
      <PostCodeInput value={props.post_code} />
      <StateSelector states={states} value={props.country_state} />
      {props.country_state && (
        <div>
          <div>Its a behavior only for brazil</div>
          <div>Select the city of {COUNTRY_STATES[props.country_state]} </div>
          <CityInput value={props.city} />
        </div>
      )}
    </Fragment>
  );
}

export default BrazilianAddress;