How to add suggestion box to text input in React - reactjs

Question

I have an input with an onChange attribute that calls a function that updates my prop to store the three suggestions that I want to display. These suggestions are stored in a string array. How can I display these values below the input like an autocomplete feature?
Currently using react typescript and bootstrap

Answer 1

This is how you should handle the dropdown suggestions. I am not very familiar with react bootstrap but here is the general idea:
import React, { useState, useRef, useEffect, Fragment } from "react";
const SuggestionsInput = () => {
const [ value, setValue ] = useState("");
const [ showDropdown, setShowDropdown ] = useState(false);
const wrapperRef = useRef(null);
const suggestions = "a, aa, b, bb, cc, d, dd, e, ee";
const suggestionArr = suggestions
.split(", ")
.filter(suggestion =>
suggestion.toLowerCase().includes(value.toLowerCase())
);
const changeHandler = e => {
setValue(e.target.value);
};
const handleClickOutside = e => {
if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
setShowDropdown(false);
}
};
// Attaching the previous event with UseEffect hook
useEffect(() => {
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
});
return (
<div className="input__wrapper" ref={wrapperRef}>
<input
type="text"
onChange={changeHandler}
onFocus={() => setShowDropdown(true)}
value={value}
/>
{showDropdown && (
<div className="suggestions__dropdown">
{suggestionArr && suggestionArr.length > 0 ? (
<Fragment>
{suggestionArr.map((suggestion, index) => (
<div
key={"suggestion_" + index}
className="suggestion__item"
onClick={() => setValue(suggestion)}
/>
))}
</Fragment>
) : (
<div className="no__suggestions">No suggestions found</div>
)}
</div>
)}
</div>
);
};
And you should add this css:
.input__wrapper {
position: relative;
}
.input__wrapper .suggestions__dropdown {
position: absolute;
top: 30px;
right: 0;
left: 0;
width: 100%;
height: 100px;
overflow-y: auto;
}