Warning: Received false for a non-boolean attribute isfulled.

styled components를 사용해 boolean 값에 스타일을 줬을때 다음과 같은 에러가 발생했다.

Warning: Received false for a non-boolean attribute isfulled.

<DdayTag isdday={isdday}>

const DdayTag = styled.div`
  background: ${props => (props.isdday ? 'var(--color-primary-500)' : 'var(--color-primary-300)')};
;

If you want to write it to the DOM, pass a string instead: isfulled="false" or isfulled={value.toString()}.

If you used to conditionally omit it with isfulled={condition && value}, pass isfulled={condition ? value : undefined} instead.

styled-componet로 값을 전달할때 boolan 값을 전달하게 되면 나는 오류

porps.adult 의 boolean 값으로 color 값을 변경하고 싶었는데..
adult={item.adult} 가 non-boolean 인데 false 를 반환하고 있어 발생한 경고 인 것 같다.

해결방안

1) boolean porps 를 주려면 value 앞에 +를 붙여주거나

      <span className="adult" adult={+item.adult}>
        {item.adult ? "청불" : "Under 18"}
      </span>

두번째!

2) adult={item.adult ? 1 : 0} 를 써줘야 한다고 한다!

      <span className="adult" adult={item.adult ? 1 : 0}>
        {item.adult ? "청불" : "Under 18"}
      </span>