Skip to content

Instantly share code, notes, and snippets.

@jsdevspace
Last active September 9, 2024 07:10
Show Gist options
  • Save jsdevspace/d4ddbe59c1db6f3a678de2469209cd8d to your computer and use it in GitHub Desktop.
Save jsdevspace/d4ddbe59c1db6f3a678de2469209cd8d to your computer and use it in GitHub Desktop.
TextInput.tsx
import { ChangeEvent, useState } from 'react';
import Autocomplete from './AutoComplete';
const TextInput = () => {
const [tags, setTags] = useState<string[]>([]);
const handleKeydown = (e: ChangeEvent<HTMLInputElement> & KeyboardEvent) => {
if (e.key !== 'Enter') {
return;
}
const value = e.target.value;
if (!value.trim()) {
return;
}
setTags((tags: string[]) => {
if (tags.some((tag) => tag.toLowerCase() === value.toLowerCase())) {
return [...tags];
} else {
return [...tags, value];
}
});
e.target.value = '';
};
function removeTag(idx) {
setTags(tags.filter((el, i) => i !== idx));
}
return (
<div className='text-input-container'>
{tags.map((tag, i) => {
return (
<div className='tag-item' key={tag + i}>
<span className='text'>{tag}</span>
<span className='close' onClick={() => removeTag(i)}>
&times;
</span>
</div>
);
})}
<Autocomplete
possibleValues={['test', 'megatest']}
handleKeydown={handleKeydown}
setTags={setTags}
/>
</div>
);
};
export default TextInput;
@jsdevspace
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment