Using children prop for tab content 

The finish line is in sight now for our Tab component. The final task is to allow consumers to render tab content. We'll use the children prop to do this:

  1. Firstly, in Tabs.tsx, let's change the handleTabClick property in our context interface to include the content to render:
interface ITabsContext {  activeName: string;  handleTabClick?: (name: string, content: React.ReactNode) => void;}
  1. We are also going to hold the active content in state along with the active tab name. So, let's add this to the state interface for Tabs
interface IState {  activeName: string;  activeContent: React.ReactNode;}
  1. Let's now change the tab click handler in Tabs to set the state for the active content along with the active ...

Get Learn React with TypeScript 3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.