Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

348
Views
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?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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 />);
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!