xxxxxxxxxx
interface FullName {
firstName: string;
lastName: string;
}
function FunctionalComponent(props:FullName){
// props.firstName
// props.lastName
}
https://www.pluralsight.com/guides/defining-props-in-react-function-component-with-typescript
xxxxxxxxxx
import React from 'react';
interface Props {
}
export const App: React.FC<Props> = (props) => {
return (
<>
<SomeComponent/>
</>
);
};
xxxxxxxxxx
interface Props {
foo: string,
bar: boolean
}
const MyReactComponent: React.FC<Props> = (Props) => {
//Insert logic here
}
//Or
const MyReactComponent: React.FC<Props> = ({foo, bar}) => {
//Insert logic here
}
xxxxxxxxxx
// Declaring type of props - see "Typing Component Props" for more examples
type AppProps = {
message: string;
}; /* use `interface` if exporting so that consumers can extend */
// Easiest way to declare a Function Component; return type is inferred.
const App = ({ message }: AppProps) => <div>{message}</div>;
// you can choose annotate the return type so an error is raised if you accidentally return some other type
const App = ({ message }: AppProps): JSX.Element => <div>{message}</div>;
// you can also inline the type declaration; eliminates naming the prop types, but looks repetitive
const App = ({ message }: { message: string }) => <div>{message}</div>;