Struggling with documentation - add different content under different tabs (React)

[plaformsre]

Hi,

I am new to React and ElasticUI.

I trying to expand the following code example from https://elastic.github.io/eui/#/layout/page#a-simple-page-with-tabs by adding some content under each tab.

I cannot find any React example that explains how to add content into two or more different tabs.
tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}

I tried the content field, but failed.

Can you please help?

Thank you,
D

__

Example from the above URI:

`
import React from 'react';

import {
EuiPage,
EuiPageContent,
EuiPageHeader,
EuiPageBody,
EuiPageContentBody,
} from '@elastic/eui';

export default ({ button = <></>, content }) => (


<EuiPageHeader
restrictWidth
paddingSize="l"
pageTitle="Page title"
rightSideItems={[button]}
tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
/>


{content}




);`

[miukimiu]

Hi @mapdegree, 👋🏽

I'm converting this issue into a discussion because it seems more like a Q&A.

[miukimiu]

You can add a onClick to each object of your tabs[] and save into a state what is the current selected tab. Then you can render your content based on your selection.

This is a very basic example (you can create something more dynamic): https://codesandbox.io/s/nifty-meitner-cqd9v?file=/index.js.

Let me know if this answer was helpful.