Bug: unintended .valueOf() maybe?

[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)

†

react/packages/react-reconciler/src/ReactChildFiber.new.js

Lines 223 to 235 in 98313aa

	function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
	if (returnFiber.type !== 'textarea') {
	invariant(
	false,
	'Objects are not valid as a React child (found: %s). ' +
	'If you meant to render a collection of children, use an array ' +
	'instead.',
	Object.prototype.toString.call(newChild) === '[object Object]'
	? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
	: newChild,
	);
	}
	}

‡ 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

[rickhanlonii]

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."