[R09M App] CreateRoom 페이지 - ref 이슈

[jellyjoji]

내용

Warning: Unexpected ref object provided for select. Use either a ref-setter function or React.createRef().

console 에 계속해서 다음과 같은 warning 메세지가 나타납니다. 문제가 나타나는 Status.jsx 파일안에서는 forwardRef를 사용중입니다. ref 코드에는 이상이 없어보입니다. 사용에는 이상이 없지만 해당 메세지가 안뜨게 하려면 어떻게 해야할까요?

import { string } from 'prop-types';
import { useId, forwardRef } from 'react';

function Status({ title, className, labelClassName, ...restProps }, ref) {
  const { id } = useId();

  return (
    <>
      <label htmlFor={id} className={labelClassName}>
        {title}
      </label>
      <select
        ref={ref}
        id={id}
        className={className}
        {...restProps}
        name="status"
        defaultValue="대기중"
      >
        <option value="대기중">대기중</option>
        <option value="진행중">진행중</option>
        <option value="공구종료">공구종료</option>
      </select>
    </>
  );
}

export default forwardRef(Status);

참고 이미지 (선택)

※ 댓글에 이슈 해결 완료 후 결과 또는 해결 과정 이미지 첨부

[jellyjoji]

CreateRoom.jsx 파일 내 useRef 선언 대신 useState 를 선언하여 발생한 오류입니다. 아래와 같이 코드 선언을 정정하였습니다.

before const statusRef = useState(null);

after const statusRef = useRef(null);