0

Tengo un select que funciona bien pero quiero aparte del value enviar un dato adicional llamado "descripción" pero no sé cómo.

<div className="col-lg-4">
    <div className="row mx-auto mb-3">
        <label className="p-0 my-auto col-sm-6 col-form-label">PROMO CODE</label>
        <select onChange={(e) => this.changePromo(e)} className="form-control form-control-sm">
             <option value={this.state.promocode}>{this.state.lng["0"]["IndividualReservation"]["btnTab"]}</option>
             {this.state.PromoData.map((code) =>
                 <option key={code.idconf_promocode} value={code.promocode_name} descripcion={code.descripcion}>{code.promocode_name} </option>)
             }
        </select>
    </div>
</div>

Ese es el select y así trato de enviarlo, pero no llega a mi función

changePromo = (e) => {
    this.state.resevaDirecta.promocode = e.target.value;
    this.state.resevaDirecta.descPromocode = e.target.descripcion;
}

El value llega perfectamente, pero descripcion no está llegando.

¿Qué puedo hacer?

1 respuesta 1

0

En primer lugar: cada elemento HTML tiene una colección propia de atributos; para crear un atributo personalizado como descripcion que sea válido en HTML5 debes especificarlo con el prefijo data- (consulta esta página: uso de atributos de datos):

<option key={code.idconf_promocode} value={code.promocode_name} data-descripcion={code.descripcion}>{code.promocode_name}</option>

Para usarlo en tu función (React - No modifiques el estado directamente):

changePromo(e) {
    // dataset es el objeto que contiene los atributos "data-"
    const { value, dataset } = e.target;

    /* Cambios en el estado deben darse por setState.
       Revisa las secciones "No modifiques el estado directamente" y
       "Las actualizaciones del estado pueden ser asíncronas" en la 
       documentación de React.
    */
    this.setState(prevState => {
        let { resevaDirecta } = prevState;
        resevaDirecta.promocode: value;
        resevaDirecta.descPromocode = dataset.descripcion;

        return { reservaDirecta };
    });
}

En segundo lugar: si el dato de la descripción viene de la misma colección desde donde originaste la lista de opciones, puedes utilizar ese mismo origen para obtener el valor que quieres:

<option key={code.idconf_promocode} value={code.promocode_name}>{code.promocode_name}</option>

Función:

changePromo(e) {
    const { value } = e.target,
          descripcion = this.state.PromoData.find(obj => obj.promocode_name === value).descripcion;

    this.setState(prevState => {
        let { resevaDirecta } = prevState;
        resevaDirecta.promocode: value;
        resevaDirecta.descPromocode = descripcion;

        return { reservaDirecta };
    });
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.