CODEWITHSUNDEEP
reactjstypescript
Hector
Hector

Reputation: 7025

Is there a way to pass down an Interface through props?

I want to know if there's a way to pass down an interface through a prop.

for example, the component below tries to pass down an interface to the Apple component.

import Apple from "./";

Interface A {
  name: string;
}

const Component = () => {
  return (
     <Apple 
       ...
       type={A} <--- Pass it in like this
     />
   );
}

1- can the above be done?

2- if so, what's the type of the interface inside the Apple component?

Upvotes: 1

Views: 1840

Answers (1)

Алексей Мартинкевич
Алексей Мартинкевич

Reputation: 2070

You cannot pass interface through props, as it only exists in build time, not run time. If you want to pass time somewhere you can use generics.

export interface AppleProps<T> { /* ... */ }

export function Apple<T>(props: AppleProps<T>) { /* ... */ }

// ...

import Apple from "./";

interface A {
  name: string;
}

const Component = () => {
  return (
     // You can provide generic arguments for react elements
     <Apple<A> />
   );
}

Upvotes: 5

Related Questions