How to assign fields to each tab in WP Gutenberg TabPanel - reactjs

Question

I know it's a simple question, but I am new in the React and WP Gutenberg world.
I am trying to create a plugin settings page using Gutenberg Components.
The tabs working fine and i know how to render fields, but i can't figure out how to assign to each tab the fields i want.
Here is the sample code:
import { TabPanel } from '#wordpress/components';
const onSelect = ( tabName ) => {
console.log( 'Selecting tab', tabName );
};
const MyTabPanel = () => (
<TabPanel
className="my-tab-panel"
activeClass="active-tab"
onSelect={ onSelect }
tabs={ [
{
name: 'tab1',
title: 'Tab 1',
className: 'tab-one',
},
{
name: 'tab2',
title: 'Tab 2',
className: 'tab-two',
},
] }
>
{ ( tab ) => <p>{ tab.title }</p> }
</TabPanel>
);

Answer 1

The Developer guide for Tab Panel mentions that
tabs is an array of objects, which new properties can be added to. By adding a new property, eg content to each of your tab objects, additional components can be set to render for each tab. The simple example uses ( tab ) => <p>{ tab.title }</p> but this could also include your own custom/existing components defined in content, eg:
import { Button, TabPanel } from '#wordpress/components';
const onSelect = (tabName) => {
console.log('Selecting tab', tabName);
};
const MyTabPanel = () => (
<TabPanel
className="my-tab-panel"
activeClass="active-tab"
onSelect={onSelect}
tabs={[
{
name: 'tab1',
title: 'Tab 1',
className: 'tab-one',
content: <p>Some content goes here</p>
},
{
name: 'tab2',
title: 'Tab 2',
className: 'tab-two',
content: <MyCustomComponent />
},
]}
>
{({ title, content, className }) => <div className={className}><h3>{title}</h3>{content}</div>}
</TabPanel>
);
const MyCustomComponent = () => {
return <><p>Here is a button</p><Button variant="secondary">Click me!</Button></>;
}
The children function (given as anonymous function, above </TabPanel>) renders the tabviews by passing in the active tab object, which now includes the extra content for the tab. The output of the example above is:
Aside from the Developer Guide, the Gutenberg source code is a good place to look for other examples of how TabPanel component can be implemented.. Hope this helps you with adding fields to your tabs..