Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. 에러

개발을 하던 중, onSubmit이 완료되면 input의 value를 초기화하는 코드를 작성하엿는데, 아래와 같은 에러가 발생하였다.

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

이 에러는 input태그 사용 시, value속성이 고정값이 아니면 발생하는 에러라고 한다.

이 에러는 value대신 defaltValue를 사용하면 해결이 된다.

const [text, setText] = useState("");
const onSubmit = async (event: any) => {
....
setText("");
}
.................
			<TextForm
                onSubmit={onSubmit}
                onChange={onChange}
              >
                <InputText value={text} />
                <TextBtn>보내기</TextBtn>
              </TextForm>

에러 발생
--->

const [text, setText] = useState("");
const onSubmit = async (event: any) => {
....
setText("");
}
.................
			<TextForm
                onSubmit={onSubmit}
                onChange={onChange}
              >
                <InputText value={text} />
                <TextBtn>보내기</TextBtn>
              </TextForm>

에러 없음!👍