Bug: missing else statement in ReactDOMServerFormatConfig.js

[justingrant]

I found this bug while working on an unrelated PR #22064. Looks like there's a missing else, because the value set in line 978 is always overwritten in line 980. Given that children.toString() and children[0].toString() will return the same string for one-element arrays, I assume the best (for perf and bundle size) fix would be to remove the assignment inside the if block.

react/packages/react-dom/src/server/ReactDOMServerFormatConfig.js

Lines 973 to 980 in fd5e01c

	if (isArray(children)) {
	invariant(
	children.length <= 1,
	'<textarea> can only have at most one child.',
	);
	value = '' + children[0];
	}
	value = '' + children;

Because the observable behavior is identical whether or not children is a scalar or a one-element array, I'm not sure a test could be written to verify a fix.

EDIT: I updated the text above after I learned that Array.prototype.toString() acts the same as Array.prototype.join(). JavaScript teaches me something new every day!

[akgupta0777]

@justingrant It is using an invariant in the if check. Invariant is an error handling guard which lets you use assertions in your code.
so invariant requires two arguments first one is the condition and second is error message to be thrown after condition gets violated.

In above case, As soon as length of children is more than 1 then it throws an error saying '<textarea> can only have at most one child.' and stops the execution right away and prevent overwriting of value.

[justingrant]

In above case, As soon as length of children is more than 1 then it throws an error saying '<textarea> can only have at most one child.' and stops the execution right away and prevent overwriting of value.

I was actually thinking about the 1-element-in-array case. I'd assumed that coercing an Array to a string would yield something like '[object Array]'. But just now I learned that Array overrides toString and its implementation is equivalent to .join()! After 20 years of using JS, every time I think I've learned enough, I'm reminded that there are still surprises lurking.

So there's still a bug here, but it's a much minor one than I originally thought. The actual bug is that value = '' + children[0]; is unnecessary code and can be removed. If there's one element in the array, execution will fall through to line 980 and the original value will be overwritten with the same exact string.

[akgupta0777]

Seriously JavaScript sometimes screw minds really well. Even today I also got to know that concatenation of an array with string results in a string with all array elements joined separated by ",".
Well yes in that case it is unnecessary to use line 978.

I will love to contribute on this issue and fix this bug.

[rickhanlonii]

Was added here, and does look like a mistake. cc @sebmarkbage

[sebmarkbage]

Yea, feel free to fix it to an else. Either solution works and might deopt differently but given that this whole branch warns anyway it doesn't matter.

[Hyperion101010]

Picking this up

[justingrant]

Cool. I'd suggest removing the first assignment instead of adding an else. Save a few bytes of bundle size. Unless there's some perf reason not to do this.

[amensum]

Cool. I'd suggest removing the first assignment instead of adding an else. Save a few bytes of bundle size. Unless there's some perf reason not to do this.

Check #22409 pls

[Hyperion101010]

Check this @justingrant. I don't know why codesandbox fails is there any way I can get circle-ci report? Here #22431

[justingrant]

Check this @justingrant. I don't know why codesandbox fails is there any way I can get circle-ci report? Here #22431

Probably a transient build issue. I made a suggestion over at #22431, and if you commit a change then CI should rebuild and hopefully it will work this time.

[amensum]

@justingrant
I added the suggested comment to the code #22409

[Hyperion101010]

I added comments to the changes and re-uploaded them. Let's see how it rebuilds @justingrant

[amensum]

@Hyperion101010

What's wrong with my PR? Why did you make a similar PR with identical code? If there is something wrong with my PR, I can make changes.

[Hyperion101010]

This issue hasn't been assigned to anyone so I think anyone is free to open PR for it @amensum

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!