Skip to content

How can I avoid mapping over Children while completing the Tabs example? #62

Closed
@amite

Description

@amite

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions