This isn’t related to string representations. The logging of object references is something that trips up a lot of people when debugging (myself included). Copy and paste the following all at once into your console:
var a = [1,2,3,4];
console.log(a);
a.push(9)
console.log(a);
At first, it will look correct, but when you click the disclosure arrows to inspect the contents, both logs will be the same. This is because you’re inspecting a reference to the object, not an instantaneous printout. This is what the next sentence in the docs describe:
which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is the value of the object at the moment you click it open.
What I’m talking about is overriding the object’s toString
method to change the way it’s represented as a string. Try this:
var x = new Object();
console.log('' + x); // This coerces x to a string; should be "[object Object]"
x.toString = () => "This is x";
console.log('' + x); // should now show "This is x"
You can change how objects show up in debugging this way, and it would be straightforward to do this when React is compiling. It could take the JSX as a string literal, create a function to output that string as the toString
method of the component, and let the error handler coerce the object to a string. Again, I don’t know that this is what happens, but it’s not a particularly wacky idea.