You can implement this in your favourite way, we are interested in the approach more than anything else. Feel free to install any package you believe is necessary to achieve the final goal if necessary. Please vocalise your thoughts and ask questions if needed.
- First of all, please create a branch with your name locally
- Please create a component called "ClkContainer"
- Please create a new component called "ClkSelectList"
Its purpose is to wrap the
<select>HTML element and to bind it to a model. The available options are["white", "red", "green", "yellow", "blue"] - Please create a component called "ClkInputSelector" Its purpose is to wrap the
<input>HTML element and to add some logic to it.
- Display ClkSelectList with all its options
- Display ClkInputSelector next to it
- If the content of ClkInputSelector matches one of the available options in ClkSelectList, select that value, if not, don't do anything
- 💥 BONUS: provide a way for adding new elements to the ClkSelectList at runtime while preserving the functionality you have built so far, again, you have complete freedom over the approach
Based on the Create React App Sample - By Alessandro De Blasis for Clarksons Platou