question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React.cloneElement handles `undefined` props differently to React.createElement

See original GitHub issue

I’m not sure if this is expected but it caught me out earlier:

// Without clone
function MyComponent() {}

MyComponent.defaultProps = {
    foo: 'foo'
};

let element = React.createElement(MyComponent, {
    foo: undefined
});

console.log(element.props.foo); // 'foo'
// With clone
function MyComponent() {}

MyComponent.defaultProps = {
    foo: 'foo'
};

let element = React.createElement(MyComponent);
element = React.cloneElement(element, {
    foo: undefined
});

console.log(element.props.foo); // undefined

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:2
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
arjunsharmacommented, Sep 15, 2016

It does the same thing as React.createElement, which is to set the property to the value in defaultProps. So item # 2 in your list.

If you want to look at the PR that fixed this, it was fixed in #5997.

1reaction
mattzeunertcommented, Feb 8, 2016

Why would it restore the default value? It’s not the behavior I would expect intuitively.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding a prop to previously defined component using ...
I expect it to receive the new prop along with the previously defined props. <div>foob, foo bar foobar name</div>. javascript · reactjs ......
Read more >
React Top-Level API
Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are...
Read more >
Transforming Elements In React. Introduction | by A. Sharif
Let's clone our existing TitleSubtitleNoInfoComponent component and pass in info via props. const TitleSubtitleInfoComponent = React.
Read more >
Using the React.cloneElement() function to clone elements
In this in-depth tutorial, learn how to clone and manipulate elements three different ways using the React.cloneElement function.
Read more >
CHANGELOG.md - facebook/react - Sourcegraph
Components can now render undefined : React no longer throws if you return ... Disable <div hidden /> prerendering in favor of a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found