Improve Tab Props

[rostero1]

Tab is a nice addition. The problem I'm having is that I want to pass props to my tab panes (render functions). To do this I'm doing <Tab panes={panes} foo="foo" />, which returns Unknown prop foo on <div> tag. Remove this prop from the element. For details, see. Can we have a new prop, like paneProps that we use just for the render props?

Also, can we have take in Tab.Pane children in addition to a panes list prop?

[layershifter]

You have this warning because unhandled props are passed to the root element of Tab, it's a div in this case. Can you clarify your needs? Why you can't use this approach?

const paneProps = { foo: 'foo' }
const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane {...paneProps}>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane {...paneProps}>Tab 2 Content</Tab.Pane> },
]

const TabExampleBasic = () => (
  <Tab panes={panes} />
)

I'm pretty sure that the new prop isn't required.

[levithomason]

I had actually considered this as well. Most often, every pane will be rendered with mostly the same props.

I'm still not completely convinced one way or the either, so I had defaulted to the minimal case.

[layershifter]

I'm closed this for housekeeping, however the issue can be reopened after @rostero1's answer.

[EdsonAlcala]

I'm very confused, I just don't get it, how do I pass data to the panes?

[levithomason]

@EdsonAlcala create the const panes = [] within Profile component. This way, you can pass any of the connected data to the panes.

[hkjpotato]

I am confused about this const panes array.
What if my Tab is receiving some event handlers and values as props from a parent, which should be distributed to each pane child. How can I pass those props to each child pane?

Is the following approach the right way to pass props to panes?
If it is correct, what about the performance? It seems it is creating React Component on the fly (the functional component created by arrow function) on each render. Since it is creating new Component I guess the diff algorithm will not work? I remember React HOC document says that dont create component during rendering. Please help...thx

const MyTab = ({
  val1, onVal1Change,
  val2, onVal2Change
}) => {
  //create pane on the fly?
  const panes = [
    { menuItem: 'Val1', 
      render: () => <Tab.Pane><UIForVal1 value={val1} onChange={onVal1Change} /></Tab.Pane> 
    },
    { menuItem: 'Val2', 
      render: () => <Tab.Pane><UIForVal2 value={val2} onChange={onVal2Change} /></Tab.Pane> 
    }
  ];

  return (
    <Tab 
      style={{
        fontSize: '0.8rem'
      }}
      grid={{ paneWidth: 12, tabWidth: 6 }}
      panes={panes} />
  );
}

[cassiopagnoncelli]

Should you have two items with same menuItem name you get a React error like

Encountered two children with the same key

It uses menuItem as key. I'd suggest using uuid to generate the key the each menu item.

[levithomason]

Please open new issues with complete reports for the best help.