fix(react): Fix hydration mismatch for experimentalReactChildren

[kedarvartak]

Fixes hydration mismatch when using experimentalReactChildren option.

Problem

When experimentalReactChildren=true, children passed to React components had inconsistent prop handling between server and client:

• Server correctly mapped class to className and generated unique key props
• Client read DOM attributes directly without applying the same transformations

This caused React warnings and hydration errors:

• "Invalid DOM property 'class'. Did you mean 'className'?"
• "Each child in a list should have a unique 'key' prop."

Solution

Updated the client-side createReactElementFromDOMElement function in client.ts to:

• Map DOM attribute names to React prop names (class to className, for to htmlFor)
• Generate unique key props for each child element

Testing

Added unit tests for class-to-className mapping and key generation. All existing tests pass.

Closes #15102

[changeset-bot]

⚠️ No Changeset found

Latest commit: afa562b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[matthewp]

Can you change this to go against next instead?

[ematipico]

If possible, please avoid post update expressions like this, because they are very easy to get wrong. Instead, let's do this

Suggested change

	return createReactElementFromDOMElement(c, id, childKey++);
	childKey += 1;
	return createReactElementFromDOMElement(c, id, childKey);

[ematipico]

Same here

Suggested change

	id = clientIds++;
	clientIds += 1;
	id = clientIds;