I am not able to implement onClick functionality on AsyncTypeahead to console log the user ID after I find the user. can someone please help. thanks
const SEARCH_URI = 'https://api.github.com/search/users';
const AsyncExample = () => {
const [isLoading, setIsLoading] = useState(false);
const [options, setOptions] = useState([]);
const handleSearch = (query) => {
setIsLoading(true);
fetch(`${SEARCH_URI}?q=${query}+in:login&page=1&per_page=50`)
.then((resp) => resp.json())
.then(({ items }) => {
const options = items.map((i) => ({
avatar_url: i.avatar_url,
id: i.id,
login: i.login,
}));
setOptions(options);
setIsLoading(false);
});
};
const filterBy = () => true;
return (
<AsyncTypeahead
filterBy={filterBy}
id="async-example"
isLoading={isLoading}
labelKey="login"
minLength={2}
onSearch={handleSearch}
options={options}
placeholder="Search for a Github user..."
/>
);
};
Try using onChange
, which fires after a menu option has been selected:
<AsyncTypeahead
...
onChange={(selected) => {
console.log(selected[0]?.id);
}}
/>
Note that selected
is always an array.