Skip to content

Bug: unintended .valueOf() maybe? #20594

Closed

Description

@dimaqq

While chasing tc39/proposal-temporal#1224 where I mistakenly pasted a ZonedDateTime into JSX, I discovered that:

  • react-reconciler doesn't like arbitrary objects (fair)
  • calls throwOnInvalidObjectType on such objects, source code of which looks completely fine†
  • but said source code gets compiled into ... "foo" + newChild + "bar" ...‡
  • at the same time, react explicitly chose not to valueOf() objects in Consider using .valueOf() before providing fragment warning. #4769
  • this specific type throws unconditionally on .valueOf (I'm ambivalent about that decision)

† https://github.com/facebook/react/blob/98313aaa7ea58d49eb30ecffc0f9eb6fc1ef467a/packages/react-reconciler/src/ReactChildFiber.new.js#L223-L235

‡ compiled to throw Error( "Objects are not valid as a React child (found: " + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + "). If you meant to render a collection of children, use an array instead." );

So, react won't use valueOf to render an element, but will use it to report and error about an element.
Maybe the "compilation" or interpolation of invariant is wrong?
Or perhaps %s handling in invariant is wrong?
Maybe my assumptions are wrong?
Maybe that type is wrong?

React version: 17.0.1

Steps To Reproduce

  1. return <div>{ new Temporal.Instant(0n).toZonedDateTimeISO("Europe/Berlin") }</div>;

Link to code example: https://github.com/dimaqq/test-temporal

Activity

  1. rickhanlonii commented on Jan 18, 2021

    @rickhanlonii
    Member

    Confirmed.

    @dimaqq do you want to put in a PR to fix it? You should be able to just change newChild to Object.prototype.toString.call(newChild) in the three or so places that this error is thrown.

    That change would result in this message:

    Objects are not valid as a React child (found: [object Temporal.ZonedDateTime]). If you meant to render a collection of children, use an array instead."

  2. added a commit that references this issue on Jan 20, 2021
    2e948e0
  3. added a commit that references this issue on Jun 15, 2021
    d66b4c4
  4. added a commit that references this issue on Jun 25, 2026
    1c34571
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions