React.cloneElement cannot remove existing props

Do you want to request a feature or report a bug?

A feature.

What is the current behavior?

When an element is cloned with React.cloneElement, it’s possible to add new props or modify existing ones, but not to remove existing props.

Relevant code.

Example of how it works right now:

const element = React.createElement("a", {href: "http://github.com"});
const newElement = React.cloneElement(element, {href: undefined});
console.log(newElement.props); // {href: undefined}

What is the desired behavior?

It would be great to add some way to remove props (passing undefined as value?):

const element = React.createElement("a", {href: "http://github.com"});
const newElement = React.cloneElement(element, {href: undefined});
console.log(newElement.props); // {}

I guess I could use directly React.createElement but, AFAIK, I’ll have also to worry about special attributes like key and ref. I’d rather not mess with internals.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I think it has worked this way in all React versions.

What’s your use case?

I am applying a map transformation of elements recursively and I need to remove some virtual props before passing the real elements for React to render. Console shows React does not recognize the [unknownProp] prop on a DOM element for those props, I’d want to avoid that.

[joaopedrodcf]

Any new update on this issue? 👍

[sophiebits]

We try to treat undefined the same as absent basically everywhere in React. Perhaps we should change the code that warns React does not recognize the unknownProp prop on a DOM element instead so that it is fine to leave an undefined in.