Bug Report

Compiled code contain jsx code <Label label='aaaa'/>

🔎 Search Terms

<!-- Compile typescript code to javascript with ts-loader or babel-loader -->

🕗 Version & Regression Information

Typescript version 5.1.0-beta

⏯ Playground Link

<!-- A link to a TypeScript Playground "Share" link which shows this behavior. This should have the same code as the code snippet below, and use whichever settings are relevant to your report.

As a last resort, you can link to a repo, but these will be slower for us to investigate. --> Playground link with problem code

Playground link with work code

💻 Code

import * as React from 'react';

const Label: React.FC<{ label: string; }> = props => <label>{props.label}</label>;

interface BindProps<T = any, K extends keyof T = any> {
  bObject: T;
  bKey: K;
  bLabel?: string | React.ReactNode;
}

function bind<T, K extends keyof T>(bObject: T, bKey: K, bLabel?: string | React.ReactNode): BindProps<T, K> {
  return { bObject, bKey, bLabel };
}

function withBind<P extends object, V extends keyof P, C extends keyof P>(
  Component: React.ComponentType<P>,
  pick: (value: P[V], onChange: (value: P[V]) => void) => Pick<P, V | C>
) {
    return class extends React.Component<Omit<P, V | C> & BindProps> {
        private onChange = () => {
        };

        render() {
            const { bObject, bKey, bLabel, ...rest } = this.props;
            const props = { ...pick(bObject[bKey], this.onChange), ...rest } as P;
            const element = <Component {...props} />;
            if (bLabel === undefined) {
                return element;
            }
            
            return (
                <>
                  {typeof bLabel === 'string' ? <Label label={bLabel} /> : bLabel}
                  {element}
                </>
            );
        }
    }
}

interface TextInputProps {
    value: string;
    onChange: React.ChangeEventHandler<HTMLInputElement>;
}

const TextInput: React.FC<TextInputProps> = props => <input type='text' {...props} />;

export const BTextInput = withBind<TextInputProps, 'value', 'onChange'>(TextInput, (value, onChange) => {
  return { value, onChange: e => onChange(e.currentTarget.value) };
});

const obj = { text: '' };
<BTextInput {...bind(obj, 'text', <Label label='aaaa' />)} />;

🙁 Actual behavior

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', <Label label='aaaa'/>)));

🙂 Expected behavior

React.createElement(exports.BTextInput, Object.assign({}, bind(obj, 'text', React.createElement(Label, { label: 'aaaa' }))));

Once merged, can the fix be cherry picked into a 5.1.x release? This seems like a regression currently in 5.1.2-rc.