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.
Como podria almacenar los id y a su vez mostrar los nombres correspondiente a los id