Type is not assignable to type 'IntrinsicAttributes

user_533941 0
Viewed 4786

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?

react-props typescript reactjs children javascript
2 Answers

try changing const FadeInSection: FunctionComponent = ({ offset, children }: FadeInSectionProps) to const FadeInSection: FunctionComponent<FadeInSectionProps> = ({ offset, children })

You type the component with FunctionComponent instead of props, so you can use internal props like children, without the need to type them. (you can actually remove children from your interface, cause it exists on FunctionComponent interface). What is happening is that you specify the type of const FadeInSection not the type of props, so when you used it previously, compiler didn't look into your interface at all

user_145051150

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 />);
}
user_5339410
Related