title: REACT Problem [object object] Select OnChange
body: <p>I have a component with a select.</p>
  
  <p>When I click on an option, the <strong>OnProductChange</strong> returns the value. But my e.target.value is worth [Object Object].</p>
  
  <p>However,  {console.log (product}  returns: {id: 1, name: "VAM"}</p>
  
  <p>When I click on Add LibellePrerequis I get this: {libelle_prerequis: "dd", produit: "[object Object]", typologie: "[object Object]"}</p>
  
  <p>I would like to get this:
  {libelle_prerequis: "dd", product: "{id: 1, nom: "VAM"}", typology: "{id: 1, nom: "devis"}"}</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import 'bootstrap/dist/css/bootstrap.min.css';
  
  export class LibellePrerequisForm extends React.Component  {
      constructor(props) {
          super(props);
          {console.log(props.store)}
          this.onLibellePrerequisChange = this.onLibellePrerequisChange.bind(this);
          this.onProduitChange = this.onProduitChange.bind(this);
          this.onTypologieChange = this.onTypologieChange.bind(this);
          this.onSubmit = this.onSubmit.bind(this);
  
          this.state = {
              libelle_prerequis: props.libelleprerequis ? props.libelleprerequis.libelle_prerequis : '',
              produit: '',
              typologie: '',
              error: ''
          };
      }
  
      onLibellePrerequisChange(e) {
          const libelle_prerequis = e.target.value;
          console.log(libelle_prerequis)
          this.setState(() =&gt; ({ libelle_prerequis: libelle_prerequis }));
      }
  
      onProduitChange(e) {
          const produit = e.target.value;
          console.log(produit)
          this.setState(() =&gt; ({ produit: produit }));
      }
  
      onTypologieChange(e) {
          const typologie = e.target.value;
          console.log(typologie)
          this.setState(() =&gt; ({ typologie: typologie }));
      }
  
      onSubmit(e) {
          e.preventDefault();
          console.log(this.state.libelle_prerequis)
          console.log(this.state.produit)
          console.log(this.state.typologie)
          if (!this.state.libelle_prerequis || !this.state.produit || !this.state.typologie) {
              this.setState(() =&gt; ({ error: 'Please set libelle_prerequis &amp; produit &amp; typologie!' }));
          } else {
              this.setState(() =&gt; ({ error: '' }));
              this.props.onSubmitLibellePrerequis(
                  {
                      libelle_prerequis: this.state.libelle_prerequis,
                      produit: this.state.produit,
                      typologie: this.state.typologie
                  }
              );
          }
      }
  
      render() {
          return (
              &lt;div&gt;
                  {this.state.error &amp;&amp; &lt;p className='error'&gt;{this.state.error}&lt;/p&gt;}
                  &lt;form onSubmit={this.onSubmit} className='add-book-form'&gt;
  
                      &lt;input type="text" placeholder="libelle_prerequis" autoFocus
                          value={this.state.libelle_prerequis}
                          onChange={this.onLibellePrerequisChange} /&gt;
                      &lt;br /&gt;
  
                      &lt;select onChange={this.onProduitChange} className="form-control" id="exampleFormControlSelect2"&gt;
                          &lt;option key={0} value={0} disabled selected&gt; Selectionner Produit &lt;/option&gt;
                          {
                              this.props.store.produits.map(produit =&gt; {
                              return (
                                  &lt;option key={produit.id} value={produit}&gt; {console.log(produit)} {produit.nom} &lt;/option&gt;
                              );
                          })}
                      &lt;/select&gt;
                      &lt;br /&gt;
  
                      &lt;select onChange={this.onTypologieChange} className="form-control" id="exampleFormControlSelect2"&gt;
                          &lt;option key={0} value={0} disabled selected&gt; Selectionner Typologie &lt;/option&gt;
                          {
                              this.props.store.typologies.map(typologie =&gt; {
                              return (
                                  &lt;option key={typologie.id} value={typologie}&gt; {typologie.nom} &lt;/option&gt;
                              );
                           })}
                      &lt;/select&gt;
                      &lt;br /&gt;
  
                      &lt;button&gt;Add Libelle Prerequis&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  
  const mapStateToProps = (state) =&gt; {
      return {
          //insertion dans une variable
          store: state
      };
  }
  
  export default connect(mapStateToProps)(LibellePrerequisForm);
  </code></pre>
  
  <p>Can you help me ?</p>