React.js controlled select option (drop-down) select the changed value

Question

I have the following code but when i change the value from drop-down the drop-down sticks to Select the status Rather changing it to the selected value i.e

const [formData, setFormData] = useState({
    title: "",
    status: "",
    priority: "",
    start_date: new Date(),
    due_date: new Date(),
    progress: 0,
    user_id: null,
  });

const task_statuses = ["active", "pending", "inactive", "completed"];

  const setData = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
    <select onChange={setData} name="status">
      <option value=""> Select Task Status </option>
        {task_statuses.map((status) => {
          return (
            <option key={shortid.generate()} value={status}>
              {capitalizeFirstLetter(status)}
            </option>
          );
        })}
      </select>

I would like it to change it to selected option, can't do it please help

Please Help

Have you looked at the example from the docs? reactjs.org/docs/forms.html#the-select-tag — goto
– goto, Commented Apr 10, 2020 at 10:59

Amjad · Accepted Answer · 2020-04-10 13:32:48Z

1

Because you are not setting value prop of select tag

Add value prop to value={formData.priority}

<select onChange={setData} value={formData.priority} name="status">

Thanks

answered Apr 10, 2020 at 13:32

Amjad

2,1306 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React.js controlled select option (drop-down) select the changed value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related