getting input with select - reactjs

Question

in my react application I wish to change the input to a select tag in my form , how can I do that?
<form className="form-maker" onSubmit={this.handleSubmit}>
Type:
<input name="inputType" type="text" onChange={this.handleChange} />
</form>
in to this:
<select>
<option value="text">text</option>
<option value="color">color</option>
<option value="date">date</option>
<option value="email">email</option>
<option value="tel">tel</option>
<option value="number">number</option>
</select>

Answer 1

The handleChange goes in the <select /> element, similar to the <input />.
Here is a small running example:
class App extends React.Component {
state = { value: "text" };
onSelect = ({target}) => this.setState({value: target.value})
render() {
const { value } = this.state;
return (
<div>
<select onChange={this.onSelect}>
<option value="text">text</option>
<option value="color">color</option>
<option value="date">date</option>
<option value="email">email</option>
<option value="tel">tel</option>
<option value="number">number</option>
</select>
<div>{`Selectet Value is ${value}`}</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>
You will probably want an array of these values, so it will be easier to render the <options /> and set the selected attribute.
Here is another example, this time with a different default value selected:
const values = [
"text", "color", "date", "email", "tel","number"
]
class App extends React.Component {
state = { value: "date" };
onSelect = ({target}) => this.setState({value: target.value})
render() {
const { value } = this.state;
return (
<div>
<select onChange={this.onSelect}>
{values.map(val => <option key={val} value={val} selected={val === value}>{val}</option>)}
</select>
<div>{`Selectet Value is ${value}`}</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />