hoc-category.js

const subCategoryHoc = (Component) => {
  return (props) => {
    const { onCountryChange, onCityChange } = props;
    const [selectedOption, setSelectedOption] = useState("canada");
    const cities = {
      "canada": ["Toronto", "Quebec City", "Vancouver"],
      "china": ["Shanghai", "Beijing", "Guangzhou"],
      "japan": ["Sapporo", "Tokyo", "Yokohama"],
      "us": ["New York", "Los Angeles", "Chicago"],
    };
    const onChange = e => {
      const country = e.target.value;
      setSelectedOption(country);
      onCountryChange(country);
    };
    return (
      <select id="cars" name="country" onChange={onChange} value={selectedOption}>
        <option value="canada">Canada</option>
        <option value="china">China</option>
        <option value="japan">Japan</option>
        <option value="us">U.S</option>
      </select>
      <Component cities={cities[selectedOption]} onChange={onCityChange} />
    );
  }
};