Improve Symbol/Function error messages for form value props

[everettbu]

Mirror of facebook/react#34205
Original author: Raghuboi

---

Summary

Improves developer experience when Symbol or Function values are accidentally passed to form element value or defaultValue props. Previously, React showed generic "Invalid value" errors that provided limited guidance. This PR replaces them with specific, actionable error messages.

Fixes: React issue #11734

Before:

Invalid value for prop `value` on <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://react.dev/link/attribute-behavior

After (Symbol):

Received a Symbol as a `value` prop on <input> tag. Symbols cannot be rendered as text and will be ignored. If you need to display this value, convert it to a string first with String() or .toString().

For example: value={String(mySymbol)} or value={mySymbol.toString()}. For details, see https://react.dev/link/attribute-behavior

After (Function):

Received a function as a `value` prop on <input> tag. Functions cannot be rendered as text and will be ignored. If you meant to render the function result, call it first: value={myFunction()}. If you meant to pass a function reference, this is not supported for value props. For details, see https://react.dev/link/attribute-behavior

How did you test this change?

Verified existing behavior is preserved:

yarn test ReactDOMInput --no-coverage

All 124 tests pass.

Updated test expectations for new error messages:

• Modified ReactDOMInput-test.js to expect enhanced error messages
• Verified Symbol and Function value tests pass with new messages
• Confirmed runtime behavior unchanged (values still render as empty strings)

Validated code quality standards:

yarn prettier
yarn lint
yarn flow dom-node

Files changed:

• packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
• packages/react-dom/src/__tests__/ReactDOMInput-test.js

Impact: Improves developer experience with zero breaking changes to runtime behavior.

[greptile-apps]

Greptile Overview

Greptile Summary

Enhanced error messages for Symbol and Function values passed to input value props, replacing generic warnings with specific, actionable guidance. Test expectations updated to match new messages.

Key Issues:

• Logic error: code checks for defaultValue in Symbol/Function handlers but these checks are unreachable due to early return at lines 180-184 where defaultValue is listed as a reserved prop
• The new error messages only work for value prop, not defaultValue (test file TODO comments confirm warnings don't fire for defaultValue)
• This creates dead code and potential confusion about intended behavior

Confidence Score: 3/5

• Safe to merge but contains unreachable code that should be addressed
• The PR successfully improves error messages for value props and all tests pass, but contains unreachable code for defaultValue checks that will never execute due to control flow logic
• packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js needs attention for unreachable defaultValue checks

Important Files Changed

File Analysis

Filename	Score	Overview
packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js	3/5	Enhanced error messages for Symbol/Function value props, but includes unreachable code for defaultValue checks
packages/react-dom/src/tests/ReactDOMInput-test.js	5/5	Updated test expectations to match new error messages for value prop with Symbol/Function types

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: checks for name === 'defaultValue' but this code is unreachable for defaultValue because line 180-184 returns true early for defaultValue, preventing this type validation from running

the new error message only works for value prop, not defaultValue (as evidenced by test comments "// TODO: we should warn here." at lines 2944, 2962, 3022, 3041 in the test file)

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
Line: 274:286

Comment:
**logic:** checks for `name === 'defaultValue'` but this code is unreachable for `defaultValue` because line 180-184 returns `true` early for `defaultValue`, preventing this type validation from running

the new error message only works for `value` prop, not `defaultValue` (as evidenced by test comments "// TODO: we should warn here." at lines 2944, 2962, 3022, 3041 in the test file)

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: same issue - checks for name === 'defaultValue' but unreachable for defaultValue due to early return at lines 180-184

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
Line: 291:304

Comment:
**logic:** same issue - checks for `name === 'defaultValue'` but unreachable for `defaultValue` due to early return at lines 180-184

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.