CODEWITHSUNDEEP
reactjstypescript
Felipe
Felipe

Reputation: 462

TypeScript: passing props to children

Hello I have a problem on how I will pass my props to a children:

interface RootState {
  sideIsOpen: boolean;
  isOpen: boolean;
}

const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideIsOpen;
  const sideIsOpen = useSelector(selectIsOpen);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideIsOpen} />
    </SideNav>
  );
};

and my children:

const LogoNavigation: React.FC = (props) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  );
};

i got this error:

Type '{ isOpen: boolean; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'isOpen' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

Upvotes: 0

Views: 1357

Answers (2)

ESI
ESI

Reputation: 2047

You should to declare that yourLogoNavigation component expects to get isOpen.

You can do it with interface, it should be something like this: (It was'nt tested)

interface InterfaceName {
  isOpen: boolean
}

const LogoNavigation: React.FC<InterfaceName> = ({isOpen}) => {
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
    </LogoSide>
  )
}

Hope it helps.

Upvotes: 1

Amit
Amit

Reputation: 4292

You need to declare LogoNavigation component so that it accepts isOpen prop. for that you can define a interface or do it like below 

function LogoNavigation(props: { isOpen: boolean }) {

  return <div />;
}

Upvotes: 0

Related Questions