CODEWITHSUNDEEP
reactjstypescripttypescript-typings
slogive
slogive

Reputation: 3

How to define the type for use the spread operator to pass props

type TypeData = {
  data: {
    id: string;
    class: string;
    name: string;
    country: string;
    ew_get_url: string;
    ew_post_url: string;
    rocket_id: string;
    pages: {
      landing: {
        h1: string;
        h2: string;
      }
    }
  }
}

I can't use the spread operator, the error is in the element, there is the error showed by VSC

Property 'data' is missing in type '{ id: string; class: string; name: string; country: string; ew_get_url: string; ew_post_url: string; rocket_id: string; pages: { landing: { h1: string; h2: string; }; }; }' but required in type 'PropsType'.

export default function Funnel(props: TypeData): JSX.Element {
  const { data } = props;

  return (
    <>
      <Head><title>Start your own e-Comm biz now!</title></Head>

      <DataTest data={data} />
      <div style={{
        backgroundImage: `url("/img/${data.class}/landing/bg.jpg")`,
        backgroundAttachment: 'fixed',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        minHeight: '100vh'
      }}>
        **<Template {...data}></Template>**
      </div>
    </>
  );
}

Upvotes: 0

Views: 47

Answers (1)

Zolt&#225;n Dobrovolni
Zolt&#225;n Dobrovolni

Reputation: 356

In PropsType you ask for a 'data' property (probably you specify TypeData). However you pass the properties that are inside the data object (because spread operator unwrap the object). So Template needs: { data: {id: string; class: string; name: string ...} } You provide: { id: string; class: string; name: string ... }

You can remove the spread operator and just pass in the data for Template. Or you modify the Template's PropsType.

Upvotes: 1

Related Questions