title: Select input returns undefined using axios on ReactJS
body: <p>I have a select input developed with reactJS which options are the name of the categories (getting from the table categories) using nodejs and MySQL.</p>
  
  <p><strong>My router :</strong></p>
  
  <pre><code>exports.ajouterprod = function(req, res) {
      upload(req, res, function(imageUploadErr) {
          console.log("req", req.body);
          var today = new Date();
          var produits = {
              "Nomcat": req.body.Nomcat,
              "Img": imge
          }
          console.log("Image : " + req.body.Img);
          console.log(produits)
          connection.query('INSERT INTO produits SET ?', produits, function(error, results, fields) {
              if (error) {
                  console.log("error ocurred", error);
                  res.send({
                      "code": 400,
                      "failed": "error ocurred"
                  })
              }
              else {
                  res.send({
                      "code": 200,
                      "success": "produit registered sucessfully"
                  });
              }
          })
      });
  };
  </code></pre>
  
  <p><strong>My class :</strong></p>
  
  <pre><code>class AjouterProduit extends Component {
      constructor(props) {
          super(props)
          this.state = {
              Nomcat: [],
              Img: "",
              FormData :"",
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
  
      }
      componentWillReceiveProps(nextProps) {
          console.log("nextProps", nextProps);
      }
      componentDidMount() {
          axios({
              method: "get",
              url: "/app/getcat/",
              withCredentials: true,
          }).then(response =&gt; {
              if (response &amp;&amp; response.data) {
                  this.setState({
                      Nomcat: response.data
                  });
              }
          }).catch(error =&gt; console.log(error));
      }
  handleSubmit() {
          const formData = new FormData();
  
          formData.append('Nomcat', this.Nomcat);
  
          formData.append('Img', this.state.Img);
  
          axios({
              method: 'post',
              url: '/app/ajouterprod/',
              data: formData,
              withCredentials: true,
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          }).then(function(response) {
              this.setState({
                  alert: null
              });
              this.props.history.push('/produits/listeproduits')
          }.bind(this))
      }
  
   handleNomcatChange = (e) =&gt; {
          this.setState({
              Nomcat: e.target.value
          });
      }
   handleImgChange = (e) =&gt; {
          this.setState({
              Img: e.target.files[0]
          });
      }
  render() {
          let {Nomcat} = this.state.Nomcat;
  
  
  return (&lt;div className="animated fadeIn"&gt;
             &lt;Row&gt;
            &lt;Col xs="12"  &gt;
  
                &lt;Card&gt;
                  &lt;CardHeader&gt;
                &lt;h4&gt;&lt;strong&gt;    &lt;i className="fa fa-cube"&gt; &lt;/i&gt; Ajouter un nouveau produit&lt;/strong&gt;&lt;/h4&gt;
  
                  &lt;/CardHeader&gt;
  
                    &lt;CardBody&gt;
                      &lt;Form className="form-horizontal"  method="POST" encType="multipart/form-data" &gt;
                        &lt;FormGroup row&gt;
                         &lt;Col md="3"&gt;
                      &lt;h5&gt;  &lt;Label htmlFor="hf-nom"&gt;&lt;strong&gt;Catégorie&lt;/strong&gt;&lt;/Label&gt;&lt;/h5&gt;
                      &lt;/Col&gt;
                      &lt;Col xs="12" md="9"&gt;
                        &lt;Input type="select" name="selectcat" id="selectcat"   value={this.state.Nomcat} &gt;
                         &lt;option  value="" hidden&gt;Choisissez la catégorie&lt;/option&gt;
                         &lt;option  value="0" &gt;&lt;/option&gt;
  
                       { this.state.Nomcat.map((cat) =&gt; &lt;option value={cat} key={cat.Nomcat}&gt;{cat.Nomcat}&lt;/option&gt;)
                        }           
                        &lt;/Input&gt;
                      &lt;/Col&gt;
                        &lt;/FormGroup&gt;
  
                        &lt;FormGroup row&gt;
                      &lt;Col md="3"&gt;
                      &lt;h5&gt;  &lt;Label htmlFor="file-input"&gt;&lt;strong&gt;Image produit&lt;/strong&gt;&lt;/Label&gt;&lt;/h5&gt;
                      &lt;/Col&gt;
                      &lt;Col xs="12" md="9"&gt;
                        &lt;Input type="file" id="file-input" name="file-input"  onChange={this.handleImgChange} /&gt;
                      &lt;/Col&gt;
                    &lt;/FormGroup&gt;
  </code></pre>
  
  <p>When I run it on my frontend as you can see : </p>
  
  <p>When I chose the category, it's not been selected and it's still  on the   <code>&lt;option  value="" hidden&gt;Choisissez la catégorie&lt;/option&gt;</code>, when I submit the form, it will be inserted in the table but the Nomcat have <code>undefined</code> value.</p>
  
  <p>How can I fix that please ?                     </p>