Apply static type to props with typescript.
import React from 'react';
import './App.css';
interface SectionProps {
title: string;
render(): React.ReactNode;
}
const RenderPropsComponent: React.FC<SectionProps> = (props) => {
return (
<section>
<h2>{props.title}</h2>
{props.render()}
</section>
)
}
const SampleRenderProps1: React.FC = () => {
return (
<RenderPropsComponent
title="First Component"
render = {()=> {
return (
<p>
My first description
</p>
)
}}
/>
)
}
const SampleRenderProps2: React.FC = () => {
return (
<RenderPropsComponent
title="Second Component"
render = {()=> {
return (
<p>
Another description
</p>
)
}}
/>
)
}
const App: React.FC = () => {
return (
<div className="app">
<h1>Render Props Example</h1>
<SampleRenderProps1 />
<SampleRenderProps2 />
</div>
);
}
export default App;
Result:
