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