Stack Overflow
Stack Overflow

Questions tagged [tsx]

Extension for TypeScript files using JSX syntax

TypeScript supports embedding, type checking, and compiling JSX directly to JavaScript, as long as:

  1. Files are named with a .tsx extension
  2. The jsx compiler option is enabled

Documentation: JSX

This tag used to be about Intel's transactional memory. Use for that. See Wrong usage of the [tsx] tag on meta.

674 questions
452
votes
34 answers

Cannot use JSX unless the '--jsx' flag is provided

I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react" to your tsconfig.json file. Which I have done. Another one was to add "include: []", which I have also done. However, I am still getting the error…
AJDEV
  • 4,790
  • 3
  • 14
  • 22
235
votes
10 answers

ReactJS and Typescript : refers to a value, but is being used as a type here (TS2749)

I'm coding a ReactJS class with Typescript and Material-ui, in a .tsx file. In one of my custom components, I want to create a reference to one of the components that I use in my custom component. export class MyTextField extends…
Answerrer
  • 2,803
  • 4
  • 8
  • 18
226
votes
12 answers

Default property value in React component using TypeScript

I can't figure out how to set default property values for my components using Typescript. This is the source code: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends…
Tom
  • 2,355
  • 3
  • 11
  • 10
167
votes
9 answers

How to define css variables in style attribute in React and TypeScript

I want to define jsx like this: {array}
and I use --length in CSS, I also have cells that have --count that shows count using CSS pseudo selector (using the…
jcubic
  • 61,973
  • 54
  • 229
  • 402
147
votes
15 answers

Extending HTML elements in React and TypeScript while preserving props

I just can't wrap my head around this I guess, I've tried probably half a dozen times and always resort to any... Is there a legitimate way to start with an HTML element, wrap that in a component, and wrap that in another component such that the…
Josh
  • 6,944
  • 8
  • 41
  • 64
138
votes
10 answers

useRef TypeScript - not assignable to type LegacyRef

I am trying to use useRef with TypeScript but am having some trouble. With my RefObject (I assume) I need to access current. (ie node.current) I have tried the following const node: RefObject = useRef(null); const node =…
FamousAv8er
  • 2,345
  • 2
  • 9
  • 27
118
votes
5 answers

Using a forwardRef component with children in TypeScript

Using @types/react 16.8.2 and TypeScript 3.3.1. I lifted this forward refs example straight from the React documentation and added a couple type parameters: const FancyButton = React.forwardRef((props, ref) => (
trevorsg
  • 1,210
  • 2
  • 7
  • 7
73
votes
9 answers

vscode prettier doesn't format .tsx file

I've used the Prettier extension in the visual studio code editor for a long time, but recently I have been writing to React with Typescript. So I need to configure for Prettier to format .tsx files.
S. Hesam
  • 5,266
  • 3
  • 37
  • 59
53
votes
1 answer

interface states and props in typescript react

I'm working on a project that uses TypeScript as well as React and I am new to both. My question is about interface in TypeScript and how that relates to props and states. What is actually happening? My application doesn't run at all unless I…
ceckenrode
  • 4,543
  • 7
  • 28
  • 48
50
votes
3 answers

React - useRef with TypeScript and functional component

I'm trying to call the child component method from the parent component using useRef. In the future, the SayHi method will update the hook state in the child component. Unfortunately, I have bugs I can't deal with. Line:…
Adam Nowicki
  • 504
  • 1
  • 4
  • 9
36
votes
5 answers

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

I get this error when using "Cropper" from the react-easy-crop lib, I've tried a few things that I found on forums such as adding @types/react, importing * as React from "react" but nothing seems to work. Here's the code giving me trouble: import *…
BLSPR
  • 567
  • 1
  • 3
  • 13
30
votes
15 answers

TS2786 'Component' cannot be used as a JSX component

I have a React Typescript application that won't compile. Many components have a render method that is typed to return React.ReactNode or React.ReactElement. On compile, many errors similar to the following are reported: TS2786: 'MessagesWidget'…
andypaxo
  • 6,171
  • 3
  • 38
  • 53
29
votes
3 answers

How to iterate through a Component's Children in Typescript React?

How do I iterate through a React component's children in Typescript tsx? The following would be valid jsx: public render() { return (
{React.Children.map(this.props.children, x => x.props.foo)}
…
CookieOfFortune
  • 13,836
  • 8
  • 42
  • 58
28
votes
3 answers

How to make a functional React component with generic type?

I'm trying to make a React component which takes in a generic type parameter which will be part of its prop type. I want a solution that would look something like this: interface TestProps { value: T; onChange: (newValue: T) => void; } const…
Jeggy
  • 1,474
  • 1
  • 19
  • 35
27
votes
1 answer

React useState hooks error: Argument of type 'xxx' is not assignable to parameter of type 'SetStateAction'

I use react hooks to update, but notice error when setState. Argument of type '{ alertRules: any; }' is not assignable to parameter of type 'SetStateAction'. Object literal may only specify known properties, and 'alertRules' does not exist in…
lomeans
  • 283
  • 1
  • 3
  • 6
1
2 3
…
44 45