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;
Source: stackoverflow.com
Related Query
- How to render child element in parent element from event handler in react js
- How to override event handler function of child component from parent component in react.js
- Calling an event handler defined in parent from child component in React
- How to trigger an event in Parent Component from Child Component onClick() using React Hooks?
- React js - How to get Click event values from child component to parent component?
- how to append react div element from an array with a child element ? and how to give to mapped parent elements unique "key" props
- How to pass down event from parent to child in react with functional components?
- How to handle in class component passed additional parameters from parent to child event handler
- how to call child component callback event from parent component in react
- how to pass an event from a child component to parent component back down to another child in React
- How to use onClick event to pass the props from child component to parent component React Hooks
- React - Prevent Event Trigger on Parent From Child
- React - How to pass `ref` from child to parent component?
- How to pass an event handler to a child component in React
- Pass React Ref from parent to child in order to get DOM element
- Passing event and props from child to parent in react
- How do I programaticly navigate to a route from an event handler in React Router 4.0?
- How do i pass data up from a child web component to it's direct parent element
- How to pass input value from child to parent component react
- React - How do i force child components to re render when parent state component changes?
- How to communicate from Child Component to Parent Component with React Router
- How to update parent state from child component in React + send a paramater
- Enzyme/Mocha: How to test a react component function by firing an onChange event from a child component
- How is an argument for a callback in React being passed from the child component to the parent component?
- React & Typescript how get onClick prop from child to parent
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- How to call parent function from child prop React 15.5.0
- React TS - How to pass props from a parent component to a deeply nested child
- React - How to prevent click event from child component
- How to pass form values from child component to parent in react
More Query from same tag
- How to Stop scroll event from affecting other page in React JS
- Can't set scrollTop of HTMLElement in useEffect without timeout function
- Randomly generate number for each span that's calling this function inside of style
- React-Router, Problems with gh-pages
- Is it possible to use Material UI library with React Native?
- How to make page to the top when route changes without scrolling in Reactjs
- ReactJS when user scrolls down
- I'm not able to get API response when the state is changed
- How to call the usehook within a function using react?
- useSelector hook for functions?
- React-Redux - Show and Hide Component
- What do multiple arrow functions mean in JavaScript?
- React onClick state is not toggling back
- Error On Express Router Setup: Router.use() requires middleware function but got a undefined
- Array.splice() insert element
- React component Input validation (useState()) one step behind
- Why does a redux-saga use put method instead of dispatch?
- React Component without Function or Class?
- npm run test - unsafe-perm in lifecycle
- Converting Unix Timestamp to readable time from API
- reducer function to check/uncheck checkboxes after clicking select all button -redux react
- Passing custom props to styled-component in typescript
- How can I add Adornment inside MUI InputBase?
- Nested dynamic form creation - State shared for dynamic added fields
- How to fix the error jsx no new function as prop with typescript and react?
- Select is not working onClick IconComponent(dropdown-arrow) in react material ui
- How do I color Devanagiri diacritics in ReactJS?
- Why does slice push work in redux but not concat?
- How to call an event on tabs changed in react-bootstrap
- Redux/React: Cannot read property 'type' of undefined when changing activePage