如何从下拉框中获取成员的 ID

Question

I am trying to get the best way to get a member's ID so I can send it with an api request, currently I have a drop down menu which shows all the current members.

 <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>

The only way I have so far found to be able to get the ID so I can send it to the api, is to put the member id on the dropdown, get its value and then use a split method to just get the id,

membersId.split(" ")[0] This works fine, but I dont really want to have the id number showing on the dropdown.

So I want to just show the name Joe bloggs and if they are selected on the dropdown, then this updates membersId with Joe Bloggs ID number.

Answer 1

<option key={member.id} value={member.id}> {member.firstName, + ' ' + member.surname} </option>

Then you can use onChange event or document.getElementById("idName") for catching the selected member id's

Answer 2

Try this..

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>