본문 바로가기

카테고리 없음

[warning]Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

    <select
      onChange={handleChange}
      name="selectBox"
      aria-label="옵션선택"
      style={{
        border: "1px solid #eee",
        width: "100%",
        height: "50px",
        color: "#ccc",
        marginBottom: "15px",
        padding: "16px"
      }}
    >
      <option selected disabled style={{ color: "#ccc" }}>
        ---옵션선택---
      </option>
      {(optionValue || []).map((options, idx) => (
        <option key={idx} value={options} style={{ color: "#000" }}>
          {options}
        </option>
      ))}
    </select>

위와같이 selected 를 사용했을시 나타나는 경고이다.

react에서는 selected 를 사용하는 대신 최상위 select 에 defaultValue 를 지정하여

그놈을 맨처음 보이게 할 수 있다.

    <select
      defaultValue="default"
      onChange={handleChange}
      name="selectBox"
      aria-label="옵션선택"
      style={{
        border: "1px solid #eee",
        width: "100%",
        height: "50px",
        color: "#ccc",
        marginBottom: "15px",
        padding: "16px"
      }}
    >
      <option value="default" disabled style={{ color: "#ccc" }}>
        ---옵션선택---
      </option>
      {(optionValue || []).map((options, idx) => (
        <option key={idx} value={options} style={{ color: "#000" }}>
          {options}
        </option>
      ))}
    </select>

요런식으로. disabled 는 선택 안되게 막아주려고 넣음



출처: https://andwinter.tistory.com/326 [index.html]