Prooblem on select in react - reactjs

Question

I want to create a select component of Blood group option. I write code and it does render on dom but it is not showing up in the browser.
This is FindDonor Component
import React, { Component } from "react";
class FindDonor extends Component {
state = {
value: "Find Donor By Blood Group"
};
handleChange = e => {
this.setState({ value: e.target.value });
};
render() {
return (
<div className="findDonor">
<h1>Hello</h1>
<div className="input-field">
<select value={this.state.value} onChange={this.handleChange}>
<option value="a+">A+</option>
<option value="o+">O+</option>
<option value="b+">B+</option>
<option value="ab+">AB+</option>
<option value="a-">A-</option>
<option value="o-">O-</option>
<option value="b-">B-</option>
<option value="ab-">AB-</option>
</select>
</div>
</div>
);
}
}
export default FindDonor;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Home Component code
Home.js
App Component code
App.js

Answer 1

You are probably missing a this.handleChange = this.handleChange.bind(this); in your constructor.
Check this example from the React docs (https://reactjs.org/docs/forms.html#the-select-tag):
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

Answer 2

I think you need to pass event on your onChange onChange={(e) => {this.handleChange(e)}. Also, in case of arrow functions, there is no need to bind functions.
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
}
handleChange = (event) => {
this.setState({value: event.target.value});
}
handleSubmit = (event) => {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={(e) => {this.handleChange(e)}}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}