[React] Input 태그 속성 value & defaultValue

에러 내용

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가 변화함
<FilterInput value={getFilterBarString(filterBarInput)}></FilterInput>
  • getFilterBarString는 filterBarInput이라는 상태를 받아 string을 리턴해주는 함수이다.
const getFilterBarString = () => {
  return Object.entries(filterBarInput).reduce((acc, item) => {
    if (item[1]) {
      if (item[0] === "placeholder") acc += `${item[1]} `;
      else acc += `${item[0]}:${item[1]} `;
    }
    return acc;
  }, "");
};

좋은 웹페이지 즐겨찾기