Search code examples
javascriptreactjstypescriptreact-propschildren

Type is not assignable to type 'IntrinsicAttributes

I have this component

import React, { FunctionComponent, useEffect } from 'react';
import shouldForwardProp from '@styled-system/should-forward-prop';
import styled from 'styled-components';

const delay = 0.25;

interface FadeInSectionProps {
  offset?: number;
  children: React.ReactNode;
}

const Section = styled.div.withConfig({
  shouldForwardProp,
})<{ offset?: number }>`
  transition: 0.5s ease-in-out opacity, 0.5s ease-in-out transform;
  opacity: 0;
  transform: translate(0, -40px);

  &.fade-in-section--is-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  transition-delay: ${(props) => (props.offset ? props.offset * delay + 's' : '0s')};
`;

export const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) => {
  const [isVisible, setVisible] = React.useState(false);
  const domRef = React.useRef();
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setVisible(true);
        }
      });
    });

    observer.observe(domRef.current);
  }, []);
  return (
    <Section
      className={`fade-in-section ${isVisible ? 'fade-in-section--is-visible' : ''}`}
      ref={domRef}
      offset={offset}
    >
      {children}
    </Section>
  );
};

export default FadeInSection;

Which I'm using (after importing it) like so:

<FadeInSection>
   <Header />
<FadeInSection>

or

<div>
   <FadeInSection>
     <Item1 />
   </FadeInSection>
   <FadeInSection offset={1}>
     <Item1 />
   </FadeInSection>
</div>

But when I pass the prop offset I get this ts error (even that works as I expected) enter image description here

En english:

    Type '{ type: string; name: string; value: string; onChange: (e: any) => void; placeholder: string; label: string; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.
  Property 'type' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.ts(2322)

What I'm doing wrong? Or how Can I get rid of this error?

Solution

  • Like this the warning in the ide was gone and also the errors in the lint command

    export const FadeInSection: FunctionComponent<FadeInSectionProps> = ({
  offset,
  children,
}: FadeInSectionProps) => {
   return (<Section />);
}