CODEWITHSUNDEEP
next.jsjsx
Code Guru
Code Guru

Reputation: 15578

type client null is not assignable to IntrinsicAttributes and { Children: ReactNode nextjs

I have shareable nextjs component that accepts client property

const ClientInfo: NextPage = ({ client }: any) => {
  return (
    <div>

And in my list component I am using the component as markup like this

{
    selectedClient && <div className={styles.clientDetail}>
        <ClientInfo client={selectedClient}></ClientInfo>
    </div>
 }

and this is initial selectedClient

const [selectedClient, setSelectedClient] = useState(null);

I tried setting {} instead of null, but this shows the error

Type '{ client:null}; is not assignable to IntrinsicAttributes  and { Children: ReactNode}

Property 'client' does not exist on type IntrinsicAttributes  and { Children: ReactNode}

Upvotes: 0

Views: 56

Answers (1)

PsyGik
PsyGik

Reputation: 3675

To set types for functional components props in Nextjs with TypeScript, you can use either an interface or type alias then pass that as the type parameter to the NextPage generic type.

import { NextPage } from "next";

// Props interface with client set to any
interface Props {
  client: any;
}

const ClientInfo: NextPage<Props> = (props) => {
  // using destructuring to get client
  const { client } = props;

};

export default ClientInfo;

Upvotes: 1

Related Questions