Learn React with TypeScript 3

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;}

2. 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;}

3. Let's now change the tab click handler in Tabs to set the state for the active content along with the active ...