[리액트 에러] 리액트 에러메세지 Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

⚠️ 에러내용

Warning: Invalid DOM property `for`. Did you mean `htmlFor`

 

❓ 에러발생이유

리액트에서는 자바스크립트과 유사한 JSX문법을 사용한다. 자바스크립트에서는 for가 반복문을 사용할 때 쓰는 예약어이므로 HTML의 속성 이름(attribute name)으로 사용할 수 없다.

 

❗️ 해결방법

<label>과 같은 태그에서 for 속성 이름을 사용해야할 때는 htmlFor를 대신 사용해준다.

import React from 'react';

const RadioButton = ({ foundingDate }) => {
  const { id, name, label } = foundingDate;

  return (
    <div>
      <div>
        <input type="radio" id={id} name={name} />
        <label htmlFor={id}>{label}</label>
      </div>
    </div>
  );
};

export default RadioButton;