CodStak Weekly Challenge #11: Auto Complete Form Challenge II

React Interview Question

Hey Coders,

Hope you are doing fine and working on your web dev skills. I have a new challenge for you today, which I think should be pretty easy for you if you even basic knowledge of React. So, let’s dive deep into the question:

In this challenge, your goal is to create an interactive AutoComplete Input Form where users can type in a text field, and based on their input, suggestions will dynamically appear. The user can select one of the suggestions, and the selected option will be displayed below the input field.

Requirements:

Suggestions Filtering: You will be provided with a list of predefined suggestions (e.g., ["Apple", "Banana", "Cherry", "Date", "Elderberry"]). As the user types, filter the suggestions based on the input. Suggestions should match the input regardless of case sensitivity.

Interactive List: Display a dropdown list of filtered suggestions. When the user clicks on a suggestion, it should populate the input field and the list should disappear.

Selected Suggestion Display: Once a suggestion is selected, display it in a separate section below the input field as "Selected Suggestion: <strong>{selectedSuggestion}</strong>".

No Suggestions: If there are no matching suggestions based on the input, the dropdown should not appear.

Example: If the user types "ap", the suggestions list might show "Apple", and when they click on "Apple", it fills the input and displays "Selected Suggestion: Apple" below.

🔥You can access the challenge here

That’s all folks for this week, will see you next week with new challenge. Hope you have a good rest of the week.

---