I have a ponent with a select.

When I click on an option, the OnProductChange returns the value. But my e.target.value is worth [Object Object].

However, {console.log (product} returns: {id: 1, name: "VAM"}

When I click on Add LibellePrerequis I get this: {libelle_prerequis: "dd", produit: "[object Object]", typologie: "[object Object]"}

I would like to get this: {libelle_prerequis: "dd", product: "{id: 1, nom: "VAM"}", typology: "{id: 1, nom: "devis"}"}

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(() => ({ libelle_prerequis: libelle_prerequis }));
    }

    onProduitChange(e) {
        const produit = e.target.value;
        console.log(produit)
        this.setState(() => ({ produit: produit }));
    }

    onTypologieChange(e) {
        const typologie = e.target.value;
        console.log(typologie)
        this.setState(() => ({ 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(() => ({ error: 'Please set libelle_prerequis & produit & typologie!' }));
        } else {
            this.setState(() => ({ error: '' }));
            this.props.onSubmitLibellePrerequis(
                {
                    libelle_prerequis: this.state.libelle_prerequis,
                    produit: this.state.produit,
                    typologie: this.state.typologie
                }
            );
        }
    }

    render() {
        return (
            <div>
                {this.state.error && <p className='error'>{this.state.error}</p>}
                <form onSubmit={this.onSubmit} className='add-book-form'>

                    <input type="text" placeholder="libelle_prerequis" autoFocus
                        value={this.state.libelle_prerequis}
                        onChange={this.onLibellePrerequisChange} />
                    <br />

                    <select onChange={this.onProduitChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Produit </option>
                        {
                            this.props.store.produits.map(produit => {
                            return (
                                <option key={produit.id} value={produit}> {console.log(produit)} {produit.nom} </option>
                            );
                        })}
                    </select>
                    <br />

                    <select onChange={this.onTypologieChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Typologie </option>
                        {
                            this.props.store.typologies.map(typologie => {
                            return (
                                <option key={typologie.id} value={typologie}> {typologie.nom} </option>
                            );
                         })}
                    </select>
                    <br />

                    <button>Add Libelle Prerequis</button>
                </form>
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return {
        //insertion dans une variable
        store: state
    };
}

export default connect(mapStateToProps)(LibellePrerequisForm);

Can you help me ?

I have a ponent with a select.

When I click on an option, the OnProductChange returns the value. But my e.target.value is worth [Object Object].

However, {console.log (product} returns: {id: 1, name: "VAM"}

When I click on Add LibellePrerequis I get this: {libelle_prerequis: "dd", produit: "[object Object]", typologie: "[object Object]"}

I would like to get this: {libelle_prerequis: "dd", product: "{id: 1, nom: "VAM"}", typology: "{id: 1, nom: "devis"}"}

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(() => ({ libelle_prerequis: libelle_prerequis }));
    }

    onProduitChange(e) {
        const produit = e.target.value;
        console.log(produit)
        this.setState(() => ({ produit: produit }));
    }

    onTypologieChange(e) {
        const typologie = e.target.value;
        console.log(typologie)
        this.setState(() => ({ 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(() => ({ error: 'Please set libelle_prerequis & produit & typologie!' }));
        } else {
            this.setState(() => ({ error: '' }));
            this.props.onSubmitLibellePrerequis(
                {
                    libelle_prerequis: this.state.libelle_prerequis,
                    produit: this.state.produit,
                    typologie: this.state.typologie
                }
            );
        }
    }

    render() {
        return (
            <div>
                {this.state.error && <p className='error'>{this.state.error}</p>}
                <form onSubmit={this.onSubmit} className='add-book-form'>

                    <input type="text" placeholder="libelle_prerequis" autoFocus
                        value={this.state.libelle_prerequis}
                        onChange={this.onLibellePrerequisChange} />
                    <br />

                    <select onChange={this.onProduitChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Produit </option>
                        {
                            this.props.store.produits.map(produit => {
                            return (
                                <option key={produit.id} value={produit}> {console.log(produit)} {produit.nom} </option>
                            );
                        })}
                    </select>
                    <br />

                    <select onChange={this.onTypologieChange} className="form-control" id="exampleFormControlSelect2">
                        <option key={0} value={0} disabled selected> Selectionner Typologie </option>
                        {
                            this.props.store.typologies.map(typologie => {
                            return (
                                <option key={typologie.id} value={typologie}> {typologie.nom} </option>
                            );
                         })}
                    </select>
                    <br />

                    <button>Add Libelle Prerequis</button>
                </form>
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return {
        //insertion dans une variable
        store: state
    };
}

export default connect(mapStateToProps)(LibellePrerequisForm);

Can you help me ?

• javascript
• reactjs

• 1 Your problem/post is hard to undrestand, if you can improve your post explanation, you will have better chance to get help. – James Delaney Commented Mar 15, 2019 at 8:55
• I suspect there is something wrong with the select I don't see a value in the select ponent as peer this guide reactjs/docs/forms.html#the-select-tag – Kunukn Commented Mar 15, 2019 at 9:00

3 Answers 3

The problem is, that the value is automatically converted to a string.

The solution is to take a unique property of your produit (e.g. produit.id) and use it as a value.

And in your onProduitChange, you can search for the product with the id given.

    onProduitChange(e) {
        const produit = e.target.value;
        this.setState(() => ({ produit: this.props.store.produits.find(p => p.id == e.target.value) }));
    }

Notice, that I used == instead of ===, because I'm not sure about your types.

These answers leave a lot to be desired.

In the option tag, for the value use JSON.stringify(mappedObject).

Then, in the handleChange function, use JSON.parse(event.target.value) to get your string back into an object you can run some JavaScript on.

<select onChange={handleSelectChange}>
  <option value="none">Choose Your Players</option>
  {golfers.map((golfer, idx) => (
    <option value={JSON.stringify(golfer)} key={idx}>{golfer.fName}</option>
  ))}
</select>

On change you should set the value to state and make the ponent controlled. You are missing the value={} part. Something like this:

state= {selectValue: {id: 1, nom: "VAM"}}

onProduitChange(e) {
        const produit = e.target.value;
        this.setState(() => ({ selectValue: produit }));
    }
 ....

 <select value={this.state.selectValue} onChange={this.onProduitChange}>
<option key={0} value={{id: 0, nom: ""}} disabled selected> Selectionner Produit </option>
 ....
 </select>