Create a React component (say SearchBar) which creates a searchbar UI that searches on a provided dataset and displays the matches as suggestions.
The component's usage should look as follows:
<SearchBar
data={[{..}, {..}]}
fields={["email", "company"]}
highlight={true}
onQueryChange={(prev, next) => (console.log("prev and new search query values: ", prev, next))}
query="Google"
/>
Explaining the props below:
| Props | Description | Required (yes/no) |
|---|---|---|
| data | An array of objects passed to the SearchBar component to search on. | yes |
| fields | An array of string values, fields within the data that should be searched on | yes |
| highlight | If true, highlight the matching text | no, defaults to true |
| onQueryChange | A callback function that provides the previous and current search query values of the searchbar input. This can be used to create side-effects | no |
| query | When specified, this presets the initial search query into the SearchBar component. | no |
What we're looking for:
- Reusability of the component (you can list out any assumptions you make here),
- Search should work in a case insensitive fashion, as well as on partial words,
- Good Ux: Take any popular search site as a Ux reference (e.g. google.com, amazon.in, flipkart.com). UI wise: choose your style, there are no restrictions, however, no need to go overboard as well.
- Share the solution as a codesandbox.io project.