In my react hooks select drop down, the default value is not displaying. On page load I would like to display Select Position in the drop down. Could someone please advise why it is not displaying the default value ?

code sandbox link: https://codesandbox.io/s/sad-diffie-kx9h49?file=/src/App.js:0-991

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [defaultValue, setDefaultValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);

  useEffect(() => {
    setDefaultValue(defaultValue);
  }, []);

  const handlePositionTypeChange = (e) =>
    console.log(positionType[e.target.value]);
  return (
    <div className="App">
      <label>Position</label>
      <select
        defaultValue={defaultValue}
        onChange={(e) => handlePositionTypeChange(e)}
        key={defaultValue}
        className="browser-default custom-select"
      >
        {positionType.map((position, key) => (
          <option value={key}>{position}</option>
        ))}
      </select>
    </div>
  );
}

CodePudding user response：

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [defaultValue, setDefaultValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);

  const handlePositionTypeChange = (e) => {
    console.log("e.target.value", e.target.value);
  };
  return (
    <div className="App">
      <label>Position</label>

      <select
        value={defaultValue ? defaultValue : ""}
        onChange={handlePositionTypeChange}
        className="browser-default custom-select"
      >
        <option value="Select Position" disabled>
          Select a color...
        </option>
        {positionType?.map((position, key) => (
          <option key={key} value={position}>
            {position}
          </option>
        ))}
      </select>
    </div>
  );
}

You are missing two things- CodeSandBox Link

1. <option key={key} value={position}>
2. To select default value it should present in option also.