Can't pass children with props using React.cloneElement?

Question

I got this error

invariant.js:42 Uncaught Error: Element type is invalid

doing this

const ListWrap = ({ children, onChange }) => {
  return <div>{React.cloneElement(children, { onChange })}</div>
}

But no issue when I do

const ListWrap = ({ children }) => {
  return <div>{children}</div>
}

But I can't pass the props by merely doing return <div>{children}</div> . Any clue what went wrong?

Answer 1

React.cloneElement takes a single child. This should fix it:

const ListWrap = ({ children, onChange }) => {
  return (
    <div>
    {React.Children.map(children, child => React.cloneElement(child, { onChange }))}
    </div>
  );
}