Goal: I need to perform some post-processing of React ponents, and that involves removing some props. I tried to use React.cloneElement passing {propToRemove: undefined} as the second argument, but the prop is not removed, just set to undefined. I could use React.createElement, but according to the docs, that would lose refs, which is a serious drawback.

A contrived example not doing anything useful, just to test:

const removeUnknownPropWithClone = (el) => {
  return React.cloneElement(el, {unknownProp: undefined})
};

const App = (props) => 
  removeUnknownPropWithClone(
    <div unknownProp="1">Hello</div>
  );

This shows the error message: "React does not recognize the unknownProp prop on a DOM element". Indeed, the prop is set to undefined, but it's still there. I need to pletely remove it.

Runnable snippet (open the console to see the error messages)

Related question (but not answered there): React - Remove prop from child

Relevant source code: .js#L293

Goal: I need to perform some post-processing of React ponents, and that involves removing some props. I tried to use React.cloneElement passing {propToRemove: undefined} as the second argument, but the prop is not removed, just set to undefined. I could use React.createElement, but according to the docs, that would lose refs, which is a serious drawback.

A contrived example not doing anything useful, just to test:

const removeUnknownPropWithClone = (el) => {
  return React.cloneElement(el, {unknownProp: undefined})
};

const App = (props) => 
  removeUnknownPropWithClone(
    <div unknownProp="1">Hello</div>
  );

This shows the error message: "React does not recognize the unknownProp prop on a DOM element". Indeed, the prop is set to undefined, but it's still there. I need to pletely remove it.

Runnable snippet (open the console to see the error messages)

Related question (but not answered there): React - Remove prop from child

Relevant source code: https://github./facebook/react/blob/master/packages/react/src/ReactElement.js#L293

• javascript
• reactjs

• check stackoverflow./questions/43041013/… to see if you can find a few inspiration? – theterminalguy Commented Aug 11, 2018 at 11:28
• Thanks, @DamianSimonPeter, I did, even wrote a couple of ments :) – tokland Commented Aug 11, 2018 at 11:31
• Yeah, I think the error seems kinda straightforward I may be wrong. You shouldn't have "unknownProp=1" in a DOM element. I guess this is the cause of your error <div unknownProp="1" @tokland – theterminalguy Commented Aug 11, 2018 at 11:33
• Yeah, of course, it's a contrived example, I'll add a note to the question. I want the processing to remove the prop, which is being used somewhere else. – tokland Commented Aug 11, 2018 at 11:35

4 Answers 4

Very simple with JSX (inside a Children.map() function):

const { filtered, ...rest } = child.props
const clone = <child.type key={child.key} ref={child.ref} {...rest} />

We solved it this way

const { propToRemove, ...childProps } = child.props
const filteredChild = { ...child, props: childProps }

return React.cloneElement(filteredChild, additionalProps)

Sometimes it's good to look at sources ;)

cloneElement doesn't let remove prop - they are copied and overwritten. No option for deleting or passing function.

But looking a bit higher we can see:

export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );

  return newElement;
}

Looks easy to extend but ReactElement isn't exported :]

... but it looks like ref, key and trimmed props can be copied/passed (by config) to createElement. Check if it will be sufficient.

You could copy the element props to another object and delete the undesired prop in the new object

const removeUnknownPropWithClone = (el) => {
  const props = { ...el.props }
  delete props['unknownProps']
  return React.cloneElement(el, props)
};