Passing function props to children in React

Question

I want to use handleChange in the <Tab/> component but couldn't get it done.

const handleChange = (event, newValue) => {
setValue(newValue)
}

How can I access onChange prop on <Tab/> component?

<TabHeader value={value} onChange={handleChange}>
      <Tab label="Tab1" />
      <Tab label="Tab2" />
      <Tab label="Tab2" />
</TabHeader>

Here's my <TabHeader/> component:

function TabHeader(props) {
  const { children, value, onChange, ...other } = props

  return (
    <ul>
      {children} <--- Tab components
    </ul>
  )
}

Using CloneElement maybe? React Doc say "Using cloneElement is uncommon and can lead to fragile code". — WindCheck, Feb 16 '23 at 18:30

score 1 · Accepted Answer · answered Feb 16 '23 at 19:14

Have you tried cloneElement?

function TabHeader(props) {
  const { children, onChange } = props;

  const childWithProps = Children.map(children, (child) =>
    isValidElement(child) ? cloneElement(child, { onChange }) : null
  );

  return <ul>{childWithProps}</ul>;
}

Working solution can be found here: https://codesandbox.io/s/suspicious-dawn-h56von?file=/src/App.js:514-754

Ref: How to pass props to {this.props.children}

Passing function props to children in React

1 Answers1