React render props with typescript

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: