Closed
Description
Hey @mjackson @ryanflorence 👋
While completing your Tabs example in the Advanced React course, I ported it to the new Context api: https://codesandbox.io/s/01p15lx5rn
But this mapping over children is still bothering me.
<TabsContext.Consumer>
{({ activeIndex, onActivate }) => {
const children = React.Children.map(
this.props.children,
(child, index) =>
React.cloneElement(child, {
isActive: index === activeIndex,
onClick: () => onActivate(index)
})
);
return <div style={styles.tabList}>{children}</div>;
}}
</TabsContext.Consumer>
Mapping over children to pass them props might end up breaking the ui and the api contract for children if someone inserts a div
in between. How do I pass onClick and isActive flag to children without mapping over children?
I there any way to avoid it? 🙁
Metadata
Metadata
Assignees
Labels
No labels