Improve Tab Props

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 <Tab /> 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]

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