This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ArrayComponent = () => Array(3).fill(<span>Chris1993</span>); // ❌ | |
function App() { | |
return ( | |
<div className="App"> | |
<ArrayComponent></ArrayComponent> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ConditionComponent = ({ useRender = false }) => | |
useRender ? <span>Render ConditionComponent</span> : <span>error</span>;// ✅ | |
// or | |
const ConditionComponent = ({ useRender = false }) => | |
useRender ? <span>Render ConditionComponent</span> : null;// ✅ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ConditionComponent = ({ useRender = false }) => | |
useRender ? <span>Render ConditionComponent</span> : false;// ❌ | |
function App() { | |
return ( | |
<div className="App"> | |
<ConditionComponent useRender></ConditionComponent> | |
{/* 'ConditionComponent' cannot be used as a JSX component. | |
Its return type 'false | Element' is not a valid JSX element. | |
Type 'boolean' is not assignable to type 'ReactElement<any, any>'. | |
*/} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type IProps = React.PropsWithChildren<{ text: string }>; | |
const PropsComponent = ({ text }: IProps) => <div>{text}</div>; | |
function App() { | |
return ( | |
<div className="App"> | |
<PropsComponent text="Hello Chris1993."> | |
<span>children</span> | |
</PropsComponent> | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface GenericProps<T> { | |
content: T; | |
} | |
const GenericComponent = <T extends unknown>(props: GenericProps<T>) => { | |
const { content } = props; | |
const component = <>{content}</>; | |
return <div>{component}</div>; | |
}; | |
function App() { | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface Props<T> { | |
items: T[]; | |
renderItem: (item: T) => React.ReactNode; | |
} | |
const List = <T extends unknown>(props: Props<T>) => { | |
const { items, renderItem } = props; | |
const [state, setState] = React.useState<T[]>([]); // You can use type T in List function scope. | |
return ( | |
<div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type FCProps = { text: string; children?: any }; | |
const FCComponent: React.FC<FCProps> = ({ text = "" }) => <div>{text}</div>; | |
function App() { | |
return ( | |
<div className="App"> | |
<FCComponent text="Hello Chris1993."> | |
<span>children</span> | |
</FCComponent> | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type FCProps = { text: string }; | |
const ElementComponent = ({ text }: FCProps): JSX.Element => <div>{text}</div>; | |
function App() { | |
return ( | |
<div className="App"> | |
<ElementComponent text="Hello Chris1993."></ElementComponent> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface GenericProps<T> { | |
content: T; | |
} | |
const GenericComponent = <T extends unknown>(props: GenericProps<T>) => { | |
const { content } = props; | |
const component = <>{content}</>; | |
return <div>{component}</div>; | |
}; | |
function App() { | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
interface Props<T> { | |
items: T[]; | |
renderItem: (item: T) => React.ReactNode; | |
} | |
const List = <T extends unknown>(props: Props<T>) => { | |
const { items, renderItem } = props; | |
const [state, setState] = React.useState<T[]>([]); // You can use type T in List function scope. | |
return ( | |
<div> |
NewerOlder