Type '{ flag: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean&#0-CodePudding

I am starting with TypeScript and I got an error when passing an element to another component, I have no idea what to do.

Error on Cards component

export default function MyProject() {
  const [flag, setFlag] = useState(false)
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {

        if (entry.isIntersecting) {
          setTimeout(() => {setFlag(true)}, 300)
        }
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.1
      }
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
  }, [ref]);

    return ( 
        <>
        <div className="project" id='projects'>
            <div className="project__cards"
            ref={ref} 
                     style={{opacity: flag ? 1 : 0}}>
              <Cards flag={flag}/>
            </div>
        </div>
        </>
     );
}

I was looking for an addendum, but I don't think I can search well ;//

CodePudding user response：

I was able to reproduce your error by defining the Cards component like so:

// produces error
export default function WrongCards(flag: boolean) {
/* ... */
}

but you need to define your props along the lines of this:

// produces no error
export default function WorkingCards(props: { flag: boolean }) {
/* ... */
}

or this:

// produces no error
export default function WorkingCards({ flag }: { flag: boolean }) {
/* ... */
}

You can check out the whole implementation in this sandbox.