react props lowercase warning

김윤진·2022년 5월 4일
0

문제해결

목록 보기
9/9

Warning: React does not recognize the cardInfo prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase cardinfo instead. If you accidentally passed it from a parent component, remove it from the DOM element.

경고: React는 DOM 요소의 'cardInfo' 소품을 인식하지 못합니다. 의도적으로 DOM에 사용자 정의 속성으로 나타나게 하려면 대신 소문자 cardinfo로 철자하십시오. 실수로 상위 구성 요소에서 전달한 경우 DOM 요소에서 제거하십시오.

문제 상황

css라이브러리를 emtion을 사용해서 props를 통해 받은 값을 통해 css를 변경하고자 했다
TypeButton 컴포넌트에서 Button 컴포넌트를 만들어서 props로 button background를 바꿔줄려고 했다
emtion 공식페이지 에서 props를 마지막에 전개연산자로 넣어주라고 나와있으나 warning이 발생한다

상위 컴포넌트

function TypeButtonContainer() {
  const handleTypeButtonClick = (event: Event) => {
    console.log(event);
  };

  return (
    <>
      {cardTypes.map((cardInfo) => (
        <TypeButton key={cardInfo.name} onClick={handleTypeButtonClick} cardInfo={cardInfo} />
      ))}
    </>
  );
}

하위 컴폰넌트

const Button = (props) => (
  <button
    css={{
      width: '50px',
      height: '50px',
      borderRadius: '25px',
      backgroundColor: props.cardInfo.color,
    }}
    {...props}
  >
    {props.cardInfo.name}
  </button>
);

function TypeButton({ onClick, cardInfo }: Props) {
  return (
    <>
      <Button onClick={onClick} cardInfo={cardInfo} />
    </>
  );
}

export default TypeButton;


문제 해결

Unknown Prop Warning
button 태그의 {...props}를 지우면 warning이 사라진다

왜 그러는지는 모르겠는데?

0개의 댓글