So we need to be able to create select elements in our input component here too,
so let's add the code to handle this. In the input component where we have our case, switch case statement,
let's add a new case for selects the area elements.
So case select then the input element of course is select element or select object
and here this actually also has a closing tag because in between, we'll need to create our options.
Therefore I'll wrap this in normal parentheses so that I can write multi-line jsx code because again
between my select statements here or select tags, I want to add the options. The element config,
I don't want to pass it to this element here because in my set up, I only expect to get options let's
say, of course there would be attributes you can set on select and you probably would have to find or
define a nested config option here to have the normal attributes or you name it attributes, whatever
you want
but here I only expect to get the options as my element config
and I don't want to distribute the options as attributes across my select statement here,
instead I want to set up options here.
And by the way, having that value on the select is important to make two way binding work correctly and
so on.
So here I'll add my option element then and each option should have two pieces of information basically,
now obviously I want to create it dynamically,
I want to create it from this options array I'm passing as part of the element config.
So in the input component,
I actually don't want to hardcode it in there, I'll dynamically create it by taking my props element config
property here,
then there, this options property we set up and by mapping this into an array of jsx elements.
So here I'll have my option, I want to return jsx of course and the jsx will be an
option element, like this where I for one have the value of that element,
this will be option, whoops, option value referring to this value property in the individual option object
and then we have the display value,
so the thing we want to well show to the user. This is of course what should go between the opening and
closing option tag,
so option display value.
Now with that, we should create such a dropdown.
Now let's see if this works by saving this and having a look at our form
and yes, we can see a dropdown with the two options we set up.
We can't change the value for now because we don't have the onChange handler and the key is missing,
so that's something we have to add to the option element because we're creating it with the map method.
So let's simply add a key here
and the key can simply be the option value,
it is a unique value after all.
So now we get the input element adjusted to also be able to render dropdowns and you could of course
come up with more form elements you want to support like check boxes,
always think about how you need to configure it and make sure you get that configuration object into
your input component
but I want to go with the setup we use here.
Now with that all set up, I now want to take care about us actually receiving the values when the user
enters something.