Reactstrap - The return type of e when using Input of type "select"

Question

When using the tag imported from reactstrap, I came across a minor problem. I used

<.Input type="select" ... /.>

and wrapped inside it

 <.option value={}....>

so that when an option was selected, the value of the input was set to the value of the selected option.

Even when the value of the Input tag was set with a number, accessing e.target.value provided me with a string, which I had to parse into an int.

So I was wondering if there is a specific return type for the Input tag of type select in reactstrap- even when the value is inputted as a number, does it automatically save it as a string?

Answer 1

It doesn't seem like there is a way to achieve this in reactstrap. However the beauty of React is that you are able to quickly write your own reusable component to achieve this.

const NumberSelect = (props) => (
  <input type='select' onChange={(event) => {
    props.onChange(parseInt(event.target.value, 10));
  }}>
    <option value={1}>One</option>
    <option value={2}>Two</option>
  </input>
);

You will need to tweak this code a bit according your own needs, but this is how I would solve your problem.