React-select: Why can't options be an array of strings instead of objects

[MarbilleJuntado]

I'm using react-select in my component specifically in the startDate and the endDate inputs. Both these inputs need to be validated as strings before the form is submitted. However, the validation is failing since options have the following format [{value: '2018', label: '2018'}, {value: '2017', label: '2017'}, etc.]. Therefore, I would have something like startDate: {value: '2018'} instead of simply startDate: "2018" which is what I need. It would be perfect if options could be an array of strings like `["2018", "2017", "2016", etc.] instead. Am I missing something or is there another way around this issue?

[mkohlmyr]

Let's say I have a date form. I may want my label to be a user friendly date string, such as 17th Aug, but for ease of use programatically, I want the form to return an instance of the Date type.

You might say I should simply parse the string output of the form, but a stringified date could be ambiguous - is it 17th Aug of 2018 or 2019? If you separate your value from your label, this won't be a problem.

More generally, this question relates to data(base) normalisation.

Let's say you have two data sources (tables), City and Journey, where each journey is between two cities.

The correct way to model this in a database might be to have the Journey table laid out with two columns, from and to, referencing rows in the City table by integer id (not by string name).

| from | to | id |
|------|----| -- |
| 13 | 29 | 1 |
| 29 | 5 | 2 |

Now, you have a form which submits records to Journey. This clearly expects integers. But obviously in the dropdown you want to display the City by label - since this is how humans recognise cities.

This is why you would have an object of values and labels, rather than a single string.

[jossmac]

Thanks for the write up @mkohlmyr

---

Ref #2920