SearchInput
Used to fastly update a search.
apple
banana
orange
pinaple
grape
cherry
Props
value
Description: Search state. Type: String. Required.
onChange
Description: Function used to update Search state. Type: (e: ChangeEvent<HTMLInputElement>) => void. Required.
placeholder
Description: HTMLInputElement placeholder.
disabled
Description: Disables the input. Type: Boolean.
style
Description: Input style. Type: CSS Properties.
className
Description: Input className. Type: String.
Code
const fruits = ['apple', 'banana', 'orange', 'pinaple', 'grape', 'cherry'] const [items, setItems] = useState<string[]>(fruits)const [search, setSearch] = useState('')const updateSearch = (e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value) useEffect(() => { (() => { if (search) { const filteredItem = items.filter(item => item.includes(search)) setItems(filteredItem) } else { setItems(fruits) } } )() }, [search]) <SearchInputComponent placeholder='type some fruit' value={search} onChange={updateSearch} /> { items.map(item => ( <p key={item}>{item}</p> )) }