How to get object in <Select >

General Web Dev
1

So, it seems like value="" is useless html attribute. Meaning, I need this, in order to set up which item should be selected. But when we submit, it, it uses value in text…
I would like to send user.userId through value={user.userId}, and have name for item what it shows for user.
But apparently, this doesn’t work, because it can’t keep selected value.
And I can’t get value I want with event.target.value, it actually gets text of , and not userId in value={}


 const handleVotedFor = async (event) => {
    setVotedFor(event.target.value.name); // we get object "user", and get .name

    try {
      var response = await axios.post(
        `${BACKEND_SERVER_BASE_URL}/auth/votingForNP`,
        {
          votedFor: event.target.value.name,
          NPuserId: event.target.value.userId, // and .userId of that NP in question

          current_user_userId: userData.data.userId,
        }
      );
	  
	  

              <Select
                labelId="roleDropdowns"
                value={votedFor}
                onChange={handleVotedFor}
                className="w-[200px]"
                style={{ color: "#000" }}
              >
                {top50Users.map((user) => (
                  <MenuItem key={user.id} value={user}>
                    {user.name}
                  </MenuItem>
                ))}
2

It’s not clear to me what you are asking or trying to do, so I could have interpreted this wrong.
But there is no value attribute for the select tag. The values belong in the option tags of the select.
If you want a default option to be selected, you put the selected attribute in that option.

<label for="number">Pick a number</label>
<select name="number" id="number">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3" selected>Three</option>
    <option value="4">Four</option>
</select>

3 is the default.

1 Like