Why does my React/HTML select element not always show the default value selected?

Question

I am making a select element in Reactjs/HTML and I want to set a default value based on a component variable.(the default value of the select is the id of a component)

this is how I am doing this:

<select
    className="p-select-input"
    id="Substatus"
    defaultValue={task.SubStatus.Id}
>
    {projectStatuses.map((status) => {
        return (
            <option key={status.Id} value={status.Id}>
                {status.StatusName}
            </option>
        );
    })}
</select>

This seems to work sometimes and other times it just selects the first option. I cannot figure out why it is doing this. Especially since I have another select component where I do the same thing:

<select
    className="p-select-input"
    id="Asignee"
    defaultValue={task.AsigneeId}
>
    {employees.map((Employee) => {
        return (
            <option key={Employee.EmployeeID} value={Employee.EmployeeID}>
                {Employee.Name}
            </option>
        );
    })}
</select>

and again this one works everytime.

just for good messure this is what the 'task' object looks like


AsigneeId: 2403

Deadline: "2023-03-31T00:00:00"

ID: 53

ProjectId: 16677

SubStatus: Object { Id: 4, ProjectId: 0, StatusName: "Wachten op" }

Id: 4

ProjectId: 0

StatusName: "Wachten op"

<prototype>: Object { … }

SubStatusIndex: 2

Summary: "Testing"

Can anyone help me?

had you tried "selected" attribute to any one of them. this attribute can also be used to select by default option.. tell me if it work or not... — m-naeem66622, Mar 31 '23 at 06:44
Does this answer your question? [How can I set the default value for an HTML — m-naeem66622, Mar 31 '23 at 06:48
I have tried the selected attribute unfortunately the problem persists. Additionally I have indeed seen that other thread but I don't think that answers my question @m-naeem66622 — LokiTheShady, Mar 31 '23 at 06:54
okay let me clear you have to select the option regarding to id of"task.SubStatus.Id".. am i right? and this id is an always integer?? — m-naeem66622, Mar 31 '23 at 06:56
That is correct id is always an int in the first option has an id of 2 and the example task I gave has an id of 4 — LokiTheShady, Mar 31 '23 at 07:00
That is a use state (array) that I fill with all the statuses of a project. It correctly fills all the options with the correct statuses — LokiTheShady, Mar 31 '23 at 07:06

m-naeem66622 · Answer 1 · 2023-03-31T08:12:05.697

Here is the answer to the question as far as I have understood your question. if it doesn't work then tell me i will come back with another approach.

What you did wrong

I dont kow why you using attribute defaultValue in <select> element. i never heared about that attribute before.

Solution

you just have to find out the id of current employee and when componentId is equal to employee id then selected attribute will be assigned to it. I had used ternary operator to get this done

Note: we have used employee.id that will be equal to componentId

let componentId = 3;
  let employees = [{ id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" }, { id: 4, name: "four" }, { id: 2, name: "five" }];

  return (
    <select
      className="p-select-input"
      id="Asignee"
    >
      {employees.map((employee, index) => {
        return (
          <option selected={employee.id === componentId ? true : false} key={employee.id} value={employee.id}>
            {employee.name}
          </option>
        );
      })}
    </select>

The defaultvalue attribute sets the value of the select to task.asigneeId and the options each have a value equal to employee.Id if the default value matches one then that option gets selected For employee this works fine for status this only works some of the time and some of the time it does not even if i change nothing it sometimes works and sometimes does not. I cannot use index+ 1 because the ids are non sequential — LokiTheShady, Mar 31 '23 at 07:28
in that case you can do one thing to check if employee.id === component.id code is updated.. check if it works or not.. — m-naeem66622, Mar 31 '23 at 07:49

Why does my React/HTML select element not always show the default value selected?

1 Answers1

What you did wrong

Solution