score:1

Accepted answer

you can put your selectedcontries in state and in render you can iterate your component like that.

import react from "react";
import searchlocationbaritem from "./searchlocationbaritem";

class searchlocationbar extends react.component {
  countries = [
    "afghanistan",
    "albania",
    "algeria",
    "andorra",
    "angola",
    "anguilla",
    "antigua & barbuda",
    "argentina",
    "armenia",
    "aruba",
    "australia",
    "austria",
    "azerbaijan",
    "bahamas",
    "bahrain",
    "bangladesh",
    "barbados",
    "belarus",
    "belgium",
    "belize",
    "benin",
    "bermuda",
    "bhutan",
    "bolivia",
    "bosnia & herzegovina",
    "botswana",
    "brazil",
    "british virgin islands",
    "brunei",
    "bulgaria",
    "burkina faso",
    "burundi",
    "cambodia",
    "cameroon",
    "canada",
    "cape verde",
    "cayman islands",
    "central arfrican republic",
    "chad",
    "chile",
    "china",
    "colombia",
    "congo",
    "cook islands",
    "costa rica",
    "cote d ivoire",
    "croatia",
    "cuba",
    "curacao",
    "cyprus",
    "czech republic",
    "denmark",
    "djibouti",
    "dominica",
    "dominican republic",
    "ecuador",
    "egypt",
    "el salvador",
    "equatorial guinea",
    "eritrea",
    "estonia",
    "ethiopia",
    "falkland islands",
    "faroe islands",
    "fiji",
    "finland",
    "france",
    "french polynesia",
    "french west indies",
    "gabon",
    "gambia",
    "georgia",
    "germany",
    "ghana",
    "gibraltar",
    "greece",
    "greenland",
    "grenada",
    "guam",
    "guatemala",
    "guernsey",
    "guinea",
    "guinea bissau",
    "guyana",
    "haiti",
    "honduras",
    "hong kong",
    "hungary",
    "iceland",
    "india",
    "indonesia",
    "iran",
    "iraq",
    "ireland",
    "isle of man",
    "israel",
    "italy",
    "jamaica",
    "japan",
    "jersey",
    "jordan",
    "kazakhstan",
    "kenya",
    "kiribati",
    "kosovo",
    "kuwait",
    "kyrgyzstan",
    "laos",
    "latvia",
    "lebanon",
    "lesotho",
    "liberia",
    "libya",
    "liechtenstein",
    "lithuania",
    "luxembourg",
    "macau",
    "macedonia",
    "madagascar",
    "malawi",
    "malaysia",
    "maldives",
    "mali",
    "malta",
    "marshall islands",
    "mauritania",
    "mauritius",
    "mexico",
    "micronesia",
    "moldova",
    "monaco",
    "mongolia",
    "montenegro",
    "montserrat",
    "morocco",
    "mozambique",
    "myanmar",
    "namibia",
    "nauro",
    "nepal",
    "netherlands",
    "netherlands antilles",
    "new caledonia",
    "new zealand",
    "nicaragua",
    "niger",
    "nigeria",
    "north korea",
    "norway",
    "oman",
    "pakistan",
    "palau",
    "palestine",
    "panama",
    "papua new guinea",
    "paraguay",
    "peru",
    "philippines",
    "poland",
    "portugal",
    "puerto rico",
    "qatar",
    "reunion",
    "romania",
    "russia",
    "rwanda",
    "saint pierre & miquelon",
    "samoa",
    "san marino",
    "sao tome and principe",
    "saudi arabia",
    "senegal",
    "serbia",
    "seychelles",
    "sierra leone",
    "singapore",
    "slovakia",
    "slovenia",
    "solomon islands",
    "somalia",
    "south africa",
    "south korea",
    "south sudan",
    "spain",
    "sri lanka",
    "st kitts & nevis",
    "st lucia",
    "st vincent",
    "sudan",
    "suriname",
    "swaziland",
    "sweden",
    "switzerland",
    "syria",
    "taiwan",
    "tajikistan",
    "tanzania",
    "thailand",
    "timor l'este",
    "togo",
    "tonga",
    "trinidad & tobago",
    "tunisia",
    "turkey",
    "turkmenistan",
    "turks & caicos",
    "tuvalu",
    "uganda",
    "ukraine",
    "united arab emirates",
    "united kingdom",
    "united states of america",
    "uruguay",
    "uzbekistan",
    "vanuatu",
    "vatican city",
    "venezuela",
    "vietnam",
    "virgin islands (us)",
    "yemen",
    "zambia",
    "zimbabwe"
  ];
  state = {
    selectedcountries: []
  };
  handleoninput = e => {
    let element = undefined;
    const filterdcountries = [];
    this.countries.map(country => {
      if (country.startswith(e.target.value)) {
        filterdcountries.push(country);
      }
    });
    this.setstate({
      selectedcountries: filterdcountries
    });
  };

  render() {
    return (
      <form autocomplete="off" method="post">
        <div id="custom-search-input">
          <div classname="input-group ">
            <input
              type="text"
              classname=" search-query"
              placeholder="your address or postal code"
              oninput={this.handleoninput}
            />
            <div id="autocomplete" classname="autocomplete-items">
              {this.state.selectedcountries.length &&
                this.state.selectedcountries.map((country, index) => (
                  <searchlocationbaritem key={index} item={country} />
                ))}
            </div>
            <span classname="input-group-btn">
              <input type="submit" classname="btn_search" value="submit" />
            </span>
          </div>
        </div>
      </form>
    );
  }
}

export default searchlocationbar;

Related Query

More Query from same tag