Generic react component (TSX) and intellisense not working

TypeScript Version: 3.7.0-dev.20191011

Search Terms:

completions / suggestions
react

Code
For a simple typescript react file:

import * as React from 'react';

type Props = {
    name: string;
    isActive: boolean;
};

export const CustomComponent = <T extends {}>(props: Props) => {
    return <React.Fragment>{props.name}</React.Fragment>;
};

export const TestComponent = () => {
    return (
        <CustomComponent<string> |>
            <div></div>
        </CustomComponent>
    );
};

Place cursor at | in <CustomComponent<string>
Trigger completions

Expected behavior:
Completions for name and isActive returned

Actual behavior:
No completions are returned.

If you add a property such as isActive={true}, then a completion for name is returned

A friend of mine recently tried using JSX generics and it seems like the fix in #34958 did not work for them.

Here is an oversimplified code snippet that replicates the issue. We've tried this in two different machines and neither worked:

import * as React from "react"

type Variations = "hello" | "baaaaa" | "click"

const MyGeneric = <T extends Variations>({  }) => {
  return <div></div>
}

const Issue = () => {
  return <MyGeneric<"ctrl+space should bring up suggestions here">></MyGeneric>
}

Navigation Menu

Repository navigation

Generic react component (TSX) and intellisense not working #34110

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Generic react component (TSX) and intellisense not working #34110

Description

Activity

varemenos commented on Feb 19, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions