0

Estoy desarrollando una app de siniestros de autos, estoy acumulando los detalles en un array de la siguiente manera

const arrayDamages = e => {
        e.preventDefault()

        const arr = {
            'sectorDamage': e.target.sectorDamages.value,
            'damageDetails': e.target.damageDetails.value,
            'severityCode': e.target.severityCodes.value,
            'damageCode': e.target.damageCodes.value,
        }

        setArrDamage([
            ...arrDamage,
            arr
        ])
    }

Los datos se toman y muestran de de la siguiente manera

<h2>LISTADO</h2>
        {
            arrDamage.length > 0 ? (
                <>
                    {
                        arrDamage?.map((type, i) => {
                            return (
                                <li key={i}>{type.sectorDamage} / {type.damageDetails} / {type.severityCode} / {type.damageCode} <a href="x">[x]</a></li>
                            )
                        })
                    }
                </>
            ) : (<></>)
        }
        <ol>

        </ol><br />

        <hr />

        <form onSubmit={arrayDamages}>
            <p>
                Agregar siniestros
                <label>Sector de daño </label>
                <select name="sectorDamages" onChange={changeSectorDamage}>
                    {
                        sectorDamage?.map(type => {
                            return (
                                <option key={type._id} value={type._id}>{type.name}</option>
                            )
                        })
                    }
                </select><br />
            </p>
            <p>
                <label>Detalle </label>
                <select name="damageDetails">
                    {
                        damageDetails?.map(type => {
                            return (
                                <option key={type._id} value={type._id}>{type.code} - {type.details}</option>
                            )
                        })
                    }
                </select><br />
            </p>
            <p>
                <label>Codigo de gravedad </label>
                <select name="severityCodes">
                    {
                        severityCode?.map(type => {
                            return (
                                <option key={type._id} value={type._id}>CODIGO: {type.code} - {type.details}</option>
                            )
                        })
                    }
                </select><br />
            </p>
            <p>
                <label>Codigo de daño </label>
                <select name="damageCodes">
                    {
                        damageCode?.map(type => {
                            return (
                                <option key={type._id} value={type._id}>CODIGO: {type.code} - {type.details}</option>
                            )
                        })
                    }
                </select><br />
            </p>

            <input type="submit" value='cargar daño' /> <br />
        </form>

La idea es guardar unicamente los id de los valores de los select, que eso lo esta haciendo bien, pero quiero mostrarle a los usuarios los valores que va seleccionando pero no me estoy dando cuenta de como mostrarlo.

introducir la descripción de la imagen aquí

Como podria almacenar los id y a su vez mostrar los nombres correspondiente a los id

1 respuesta 1

2

Donde los muestras, tendrías que ir a buscar el Id y ver a que nombre pertenece:

algo como:

<li key={i}>{sectorDamage.find(x => x._id === type.sectorDamage)?.name}</li>

Y asi similar con los demás datos que quieras mostrar

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.