Estoy tratando de obtener la mejor manera de obtener la identificación de un miembro para poder enviarla con una solicitud de API, actualmente tengo un menú desplegable que muestra a todos los miembros actuales.
<select name="member_id" id="member_id" className={`form-control ${memberSelected ? "is-valid" : "is-invalid"} `} label="Member" placeholder="select" onChange={onChangeMember} required> <option selected disabled value="">Please select</option> {members[0].id && members.map((member) => { return ( <option key={member.id}> {member.id} {member.firstName} {member.surname} </option> ); })}; </select>La única forma que he encontrado hasta ahora para poder obtener la identificación para poder enviarla a la API es colocar la identificación del miembro en el menú desplegable, obtener su valor y luego usar un método dividido para obtener la identificación.
membersId.split(" ")[0] Esto funciona bien, pero realmente no quiero que se muestre el número de identificación en el menú desplegable.
Entonces, solo quiero mostrar el nombre Joe bloggs y, si se seleccionan en el menú desplegable, esto actualiza el ID de membersId con el número de identificación de Joe Bloggs .
<option key={member.id} value={member.id}> {member.firstName, + ' ' + member.surname} </option>Luego puede usar el evento onChange o document.getElementById ("idName") para capturar la identificación del miembro seleccionado
Prueba esto..
const handleOnChangeMember = (event) => { const memberId = event.target.value; // Do api call with member id } <select ... onChange={handleOnChangeMember} required> <option selected disabled value="">Please select</option> { members && members.map((member) => <option value={member.id}>{member.firstName} {member.surname} </option> } </select>