I am pretty new to React but with some Angular attempts before.
I was actually trying to implement a component which accepts a data model or object as parameter
Looks like this
import react from 'react'
interface SmbListItem{
index:number;
primary:string;
secondary:string;
}
export default function SmbList({props}:SmbListItem){
return(
<>
</>
);
}
But its saying props does not exists on SmbListItem
What I did wrong?
Also requesting a suggestion on interface or types are the best option in this situation
CodePudding user response:
import react from 'react'
interface SmbListItem{
index:number;
primary:string;
secondary:string;
}
export default function SmbList({index, primary, secondary}:SmbListItem){
return(
<>
</>
);
}
There is no such props
defined in your Interface Props
Even if you are not using Ts
and you are sure about the props
you would destructure
your props
like this
export default function SmbList({index, primary, secondary}){
return(
<></>
);
}
For Your Second Question Have a look into Types vs Interface
CodePudding user response:
Hi @Sandeep Thomas,
First, You are trying to destructure
the props
parameter in the function definition, but you are not passing any props to the function. In that case, You need to use generic type
function for that case.
If you're new to react-typescirpt
world. Then, You need to read this first:- TypeScript Docs.
In short note:-
A generic type is a type that allows you to define a type or function with one or more placeholder types that can be filled in with specific types when the generic is used.
Here is example with your code:-
export default function SmbList<T extends SmbListItem>({ props }: T) {
return <>// You code...</>;
}
The props
parameter is of a type that extends the SmbListItem
interface.