Do I need to duplicate passing props in the parent component?

Question

React

There is a Tabs component (accepts 4 props).
Which displays multiple Tab components (accepts 5 props).
In turn, the Tab component has a Tooltip component (accepts 3 props).

I'm creating a separate component for the UsersTabs page
that encapsulates the data and renders the Tabs.

Vporos.
Should the UsersTabs component accept all those properties that are accepted by Tooltip, Tab, Tabs? (12 props) or am I doing something wrong?

Is it normal (good?) to pass 1 prop as an array of objects with all the properties of internal components and scatter them inside UsersTabs?
for example

tabs={
[
  {
    'tabName': 'tab1',
    'tooltipText': 'this is tab1',
    'onTabClick': () => func(),
  },
  {
    'tabName': 'tab2',
    'tooltipText': 'this is tab2',
    'onTabClick': () => func(),
  }
]}

Answer 1

I'll try to help you. If you have few tabs, then in order not to fence 12 props, you can use this approach:

const UserTabs = () => (
  <Tabs>
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
    <Tab
      name={name}
      tooltipText={tooltipText}
      onTabClick={onTabClick}
    />
  </Tabs>
);

If possible, try to encapsulate the data internally UserTabsand try to solve the problem through composition.
If it doesn’t work out (for example, there are a lot of tabs or you don’t know the data in advance), then you can do this (that is, as you said, pass the array and create components inside tabsusing iteration ):TabsUserTabs

const createTabs = (tab) => tabs.map((tab) => {
  <Tab
    name={tab.name}
    tooltipText={tab.tooltipText}
    onTabClick={tab.onTabClick}
  />
});

const UserTabs = ({ tabs }) => <Tabs tabs={createTabs(tabs)} />;

You can read more about composition in the documentation .