Skip to content

Compiled code contain jsx code.Β #54411

Closed
@IvanovRoman

Description

@IvanovRoman

Bug Report

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

πŸ”Ž Search Terms

πŸ•— Version & Regression Information

Typescript version 5.1.0-beta

⏯ Playground Link

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' }))));

Metadata

Metadata

Assignees

Labels

BugA bug in TypeScriptFix AvailableA PR has been opened for this issue

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions