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 lowercasecardinfo
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이 사라진다
왜 그러는지는 모르겠는데?