NextJs and Typescript passing values to parent

Question

I've made a component

        <ConnectWallet setConnected={(t: boolean) => console.log(t)}>
          <>test</>
        </ConnectWallet>

The component starts like

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';

declare global {
  interface Window {
    ethereum: any;
  }
}

export interface PropsShape {
  setConnected: (t: boolean) => void;
  children: ReactNode;
}

const ConnectWallet: NextPage = ({ setConnected, children }: PropsShape) => {
...

Error on the parent is

Type '{ children: Element; setConnected: (t: boolean) => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'setConnected' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

Error on the child is

Type '({ setConnected, children }: PropsShape) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
  Type '({ setConnected, children }: PropsShape) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '({ setConnected, children }: PropsShape) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'setConnected' is missing in type '{ children?: ReactNode; }' but required in type 'PropsShape'.ts(2322)
ConnectWallet.tsx(13, 3): 'setConnected' is declared here.

Vladyslav Zavalykhatko · Accepted Answer · 2022-02-20 18:37:12Z

1

If you want to reuse ConnectWallet between 2 different pages, I'd extract it to a separate component. Right now, you're trying to render one page inside of, presumably, another.

To fix the immediate issue you have, try to change:

const ConnectWallet: React.FC<PropsShape> = ({ setConnected, children }) => {

Also, you don't have to define children inside of PropsShapre

answered Feb 20, 2022 at 18:37

Vladyslav Zavalykhatko

17.8k10 gold badges76 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

k.tten · Accepted Answer · 2022-02-20 18:14:35Z

0

Pass the props type to NextPage:

const ConnectWallet: NextPage<PropsShape> = ({ setConnected, children }) => {

But should this really be a page if it's a child component?

answered Feb 20, 2022 at 18:14

k.tten

26.8k4 gold badges34 silver badges63 bronze badges

Collectives™ on Stack Overflow

NextJs and Typescript passing values to parent

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related