select tag not working in react

Question

I am trying to include a select tag in react while using form. But the dropdown is not getting rendered. The thing is that the drop down menu for select is not even appearing on the screen.This is also happening with radio boxes. The only thing that is appearing in the browser are the two input fields and after that the label for the select tag.Afterwards the drop down menu is absent here is my code-

       import React, { Component } from "react";
       import { Link } from "react-router-dom";
       import { withRouter } from "react-router-dom";
       import { connect } from "react-redux";

       class UpdateBillForm extends Component {
       constructor(props) {
       super(props);

       this.state = {
       billername: this.props.bill.billername,
       userid: this.props.bill.userid,
       value: "sid"
        };
         this.onbillerNameUpdate = this.onbillerNameUpdate.bind(this);
         this.onbillerDescriptionUpdate = 
         this.onbillerDescriptionUpdate.bind(this);
         this.handleChange = this.handleChange.bind(this);
          } 

        onSubmit(e) {
        e.preventDefault;
        this.props.onSubmit({
        billerName: this.state.billerName,
        billerDescription: this.state.billerDescription
                   });
           this.props.history.push("/viewbiller");
               }
        onbillerNameUpdate(target) {
           this.setState(() => ({ billername: target }));
               }
        onbillerDescriptionUpdate(target) {
           this.setState(() => ({ billerDescription: target }));
             }
             handleChange(event) {
           this.setState({ value: event.target.value });
                }
        render() {
             return (
             <div>
             <form onSubmit={e => this.onSubmit(e)}>
             <label htmlFor="billerName">BillerName</label>{" "}
             <input
        type="text"
        value={this.state.billername}
        onChange={e => this.onbillerNameUpdate(e.target.value)}
      />
      <label htmlFor="billerDescription">BillerDescription</label>{" "}
      <input
        type="text"
        value={this.state.billerDescription}
        onChange={e => {
          this.onbillerDescriptionUpdate(e.target.value);
        }}
      />
      <label>
        Name
        <select value={this.state.value} onChange={e=>this.handleChange(e)}>
          <option value="sid">Sid</option>
          <option value="jam">jam</option>
        </select>
      </label>
      <br />
      <br />
      <button className="btn-flat white-text teal">Update</button>
      <Link className="btn-flat white-text right red" to="/viewbiller">
        Cancel
      </Link>
       </form>
          </div>
            );
             }
            }
         export default withRouter(connect()(UpdateBillForm));

Answer 1

If you're using materializecss, it seems to override the default behavior so it doesn't show up at all unless you initialize with materialize code.

https://materializecss.com/select.html

If you don't have dynamically rendered select elements you can use M.AutoInit() to initialize everything at once.

https://materializecss.com/auto-init.html

Lastly, if you don't want to muck with initialization, and don't mind losing the slightly nicer (arguable for mobile experience?) looking interface, you can add className="browser-default" to your select element(s) and it avoids the issue.