Selected option not persisting – React

Issue

Have a simple drop down list being populated from an axios request. It is working outside of the fact that the actual selected item in the "Select a team" drop down does not persist when selected and the default value "Select a team" continues to show. What am I missing here, any help is greatly appreciated!

import KeeperTable from "./components/KeeperTable";
import { useState, useEffect } from "react";
import axios from "axios";
import { v4 as uuidv4 } from "uuid";
import "./App.css";

const App = () => {
  const [selectedYear, setSelectedYear] = useState("");
  const [selectedTeam, setSelectedTeam] = useState("");
  const [managerList, setManagerList] = useState([]);

  const handleChange = () => {
    setSelectedYear(document.getElementById("ft-year-select").value);
    setSelectedTeam(document.getElementById("ft-team-select").value);
  };

  useEffect(() => {
    async function populateManagers() {
      axios.get("/getManagers").then((res) => {
        setManagerList(res.data);
      });
    }
    populateManagers();
  }, []);

  return (
    <div>
      <div className="ddl-container">
        <div className="ddlStyle">
          <select onChange={handleChange} id="ft-year-select">
            <option default value="#">
              Select a Year
            </option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
          </select>
        </div>
        <div className="ddlStyle">
          <select onChange={handleChange} id="ft-team-select">
            <option default value="#">
              Select a Team
            </option>
            {managerList.map((e) => {
              return [
                <option key={uuidv4()} value={e.manager}>
                  {e.manager}
                </option>,
              ];
            })}
          </select>
        </div>
      </div>
      <KeeperTable yearSearch={selectedYear} teamSearch={selectedTeam} />
    </div>
  );
};

export default App;

Adding a screenshot for referance. Here you can see that the manager "Dan" is selected yet his name doesn’t appear in the input.

Image showing an example

Solution

You do not explicitly mark as selected any option, and since you do key={uuidv4()} for each one, it means than on each re-render the options are considered different that then previous render, and so do not keep their default highlight.

You can provide a value prop to the select element and that will take care of highlighting the correct option.

<select onChange={handleChange} id="ft-team-select" value={selectedTeam} >

Initial answer (below) is wrong for react.

You will need to mark the selected one with

     {managerList.map((e) => {
          return [
            <option key={uuidv4()} value={e.manager} selected={e.manager === selectedTeam}>
              {e.manager}
            </option>,
          ];
        })}

Answered By – Gabriele Petrioli

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.