Stack Overflow
Stack Overflow

Questions tagged [react-tsx]

A TypeScript XML syntax transform recommended for use with React.

TSX is an embeddable XML-like syntax. It is meant to be transformed into valid JavaScript, though the semantics of that transformation are implementation-specific. TSX rose to popularity with the React framework, but has since seen other implementations as well. TypeScript supports embedding, type checking, and compiling TSX directly to JavaScript.

563 questions
82
votes
4 answers

Typescript image import

I found a solution here: Webpack & Typescript image import But i am getting error for this: [ts] Types of property 'src' are incompatible. Type 'typeof import("*.png")' is not assignable to type 'string | undefined'. Type 'typeof…
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
36
votes
6 answers

Format *.tsx files on save in VS Code

In settings.json it is possible to only format *.ts files with: "[typescript]": { "editor.formatOnSave": true } but I can't get it to work for *.tsx files.
David
  • 4,191
  • 2
  • 31
  • 40
29
votes
5 answers

Insert `··` prettier/prettier

I have a project that has both prettier and eslint installed. The problem is that when I save a file eslint automatically changes the format of the file and it seems some rules conflict with prettier. What is the solution? This is prettier…
Saber
  • 5,150
  • 4
  • 31
  • 43
27
votes
3 answers

Get row item on checkbox Selection in MUI X Data Grid

I'm getting Data from API and displaying it using React MUI X DataGrid. I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list. For Example in the image below, if I click on the…
Maryam
  • 357
  • 1
  • 5
  • 16
22
votes
2 answers

React typescript error Parsing error: '>' expected

I am migrating js to ts and have an error with my modified code: Line 26:8: Parsing error: '>' expected import React from "react"; import { Route, Redirect, RouteProps } from "react-router-dom"; import {render} from "react-dom" import {AppProps}…
unludo
  • 4,912
  • 7
  • 47
  • 71
20
votes
2 answers

Optional JSX Props In a TSX/JSX Project

I have a React project that I'm converting from JS to TS. An issue I'm running into is that TSX React is assuming that all properties defined in a functional component are required props. // ComponentA.tsx class ComponentA extends…
Tyler Sebastian
  • 9,067
  • 6
  • 39
  • 62
19
votes
2 answers

Error: Type 'void' is not assignable to type 'ReactNode'

I'm getting an error while calling the function, this is just for practice so I have kept everything inside App.tsx. My class looks like this: enum Actor { None = '', } const initializeCard = () => { //some logic here return card; } export…
user1547554
  • 441
  • 2
  • 8
  • 16
18
votes
4 answers

Jest encountered an unexpected token + react markdown

I'm getting an error when trying to run my test file (I'm using react typescript) ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use…
ng-someone
  • 321
  • 2
  • 9
17
votes
1 answer

React with Typescript: Argument of type 'never[]' is not assignable to parameter of type 'StateProperties | (() => StateProperties)'

I am practicing typescript. For the backend, I used node express typescript and for the frontend, I used react typeScript. I fetched the data from the backend and try to render it on my browser. I am getting an error: property 'name' does not exist…
juha
  • 515
  • 5
  • 10
  • 18
17
votes
3 answers

Enable Emmet for .tsx files on VSC

I'm using Visual Studio Code. How can I enable emmet on .tsx files? I'd like a simple .foo + tab to be expanded to
However, nothing I tried seemed to trigger emmet with the desired behavior above. Here's my VSC…
Jonca33
  • 3,333
  • 7
  • 25
  • 35
16
votes
1 answer

typescript together with nested destructuring

ES6 is great, it reduced number of codes but typescript for everything just doesn't work. If I would want to implement type checking for my arguments, which is already been destructed more than one level, wouldn't it be a mess? I think it's enough…
user9728810
14
votes
1 answer

How to render a material-ui input control instead a textfield for materials-ui-datepicker

In my React (v16.3) app I am rendering date-picker controls using material-ui-pickers library's DatePicker component. This component renders a Material-UI TextField component. I like to change this so it renders only a Material-UI Input without the…
Marc
  • 4,715
  • 3
  • 27
  • 34
14
votes
6 answers

Module not found Error when deployed on Heroku

I am trying to deploy my app on Github to Heroku but getting error: ERROR in ./src/Index.tsx Module not found: Error: Can't resolve './ConfigureStore' in '/app/src' @ ./src/Index.tsx 9:23-50 Seems like Typescript issue when I deploy on…
User3250
  • 2,961
  • 5
  • 29
  • 61
13
votes
4 answers

TypeScript Property 'props' does not exist

I have this .tsx file: import React, { Component } from 'react'; export class SidebarItem extends Component { constructor(props) { super(props); } render() { return (
  • {this.props.children}
    • ); } } However, TypeScript…
    Knight Yoshi
    • 924
    • 3
    • 11
    • 32
    12
    votes
    3 answers

    React: Can't import .tsx file

    New to using TypeScript with React. When I import a component that is from a .tsx file, it assumes it is a .js file by default. The error says that there is no About.js file or Contact.js file in that directory. Additionally, the TS linter won't let…
    ZeroSevenTen
    • 1,122
    • 2
    • 9
    • 20
    1
    2 3
    …
    37 38