text: import React from "react";
  import classes from "./Autocomplete.module.css";
  import useToggle from "hooks/useToggle";
  
  const Autocomplete = ({
  	id,
  	suggestions,
  	children,
  	value,
  	addData,
  	setInputActivity
  }) => {
  	const [isSuggestions, toggleSuggestions, setToggle] = useToggle(true);
  
  	const handleClick = dataset => {
  		return ev => {
  			ev.preventDefault();
  			setToggle(false);
  			setInputActivity(false);
  			addData(id, dataset);
  		};
  	};
  
  	const renderSuggestions = () =>
  		suggestions
  			.filter(el => el.startsWith(value))
  			.map(el => <div onMouseDown={handleClick(el)}>{el}</div>);
  
  	const handleBlur = () => setInputActivity(false);
  
  	return (
  		<form autoComplete={false}>
  			<div className={classes.Autocomplete} onBlur={handleBlur}>
  				{children}
  				{isSuggestions && (
  					<div className={classes.AutocompleteItems}>{renderSuggestions()}</div>
  				)}
  			</div>
  		</form>
  	);
  };
  
  export default Autocomplete;
  