How to get ID of a member from a dropdown box-CodePudding

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.

CodePudding user response：

<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

CodePudding user response：

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>