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
0
votes
1 answer

typing in a for loop react+typescript?

i have this interface of a Todo: export interface InitialTodoLoadingState { toggleComplete: boolean; updateText: boolean; deleteTodo: boolean; } export interface Todo { complete: boolean; _id: string; text: string; loading:…
gpbaculio
  • 5,693
  • 13
  • 60
  • 102
0
votes
1 answer

setState function not working on child component

I have the following code in my React component: class TheComponent extends Component{ constructor(props) { super(props); this.state = { a: '', b: '' }; } output = (data) => { …
Captain
  • 105
  • 1
  • 15
0
votes
2 answers

Can't call setState on a Component that is not yet mounted - tsx

I've found some thread about this problem, but none of them solved mine. Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Can't call setState on a component that is not…
Tung Le
  • 31
  • 1
  • 8
0
votes
2 answers

destruct attribute from object in typescript

In my react application with typescript I am using semantic-ui-react for UI. this snabdobx shows the usage of Menu.Item in javascript but I wan to use it in typescript and got confused.
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
0
votes
1 answer

Cannot find module 'delegates' in CRA yarn add node-sass

I have created a fresh app with CRA and want to add Sass support according to its official description which simply says to add it with yarn add node-sass but this throws an error error /home/.../frontend/node_modules/node-sass: Command failed. Exit…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
0
votes
2 answers

how to fix programmatic navigation issue using react and typescript

I'm new to react and I'm learning react programmatic navigation using typescript.since most of the tutorials are with java script, I'm not able to resolve issue with programmatic navigation using typescript As in most of the tutorials i tried…
geekboi
  • 13
  • 2
0
votes
0 answers

React Stateless Component does not compile in typescript

I have been working with React JS & Flow for quite a bit and now, recently switching over to typescript. I am not sure why typescript complains on the Stateless Component Definition. Source interface Test2Prop { names : string[]; } const…
Ashish Santikari
  • 443
  • 4
  • 19
0
votes
0 answers

IntrinsicElements typing

const Hashable: React.SFC<{Element: string}> = ({ Element = 'div', ...props }) => ts error: Type '{ id: string; }' is not assignable to type 'IntrinsicAttributes'. Property 'id' does not exist on type…
airwalker
  • 53
  • 2
  • 7
0
votes
1 answer

TestUtils findRenderedComponentWithType fails to compile when Component defined

File package.json: { "scripts": { "test": "tsc --project . --noEmit" }, "dependencies": { "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "react": "^16.6.3", "react-dom": "^16.6.3", "typescript": "^3.1.6" …
jeremija
  • 2,338
  • 1
  • 20
  • 28
0
votes
1 answer

Typescript: initialize an event listener within a class

I'm building a web application using Typescript react. I'm trying to make an accordion menu that expands on click, but it only responds to the second click. I think it's because it only starts listening after the first click. Is there any way to…
0
votes
2 answers

One of two strings as state in React with Typescript

I have a component that looks like this: export interface Props { // ... some props } export interface State { readonly mode: "add" | "delete" } export class MyComponent extends Component { readonly state = { mode: "add" } //…
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
0
votes
1 answer

Module resolve error if tsx file is included in the project item group

I created a fresh asp.net core project with react template and configed Typescript for it. Then I made a very simple file called Test.tsx with the following code import React from 'react'; class Test extends React.Component { render() { …
Steve
  • 11,696
  • 7
  • 43
  • 81
0
votes
1 answer

Spread operator with React Typescript

I have a single page application with redirecting implemented as const PrivateRoute = ({ component: Component, ...rest }) => ( ( Acc.isLoggedIn === true ? :
Connell.O'Donnell
  • 3,603
  • 11
  • 27
  • 61
0
votes
1 answer

Property 'onload' does not exist on type

There is my code to use image tag in typescript console.log('dffffffffffffffffffffffff')} style={{ ...theme.messages.mediaImg }} /> When I use onload attribute there I get the…
Dark Knight
  • 995
  • 4
  • 22
  • 48
0
votes
1 answer

How to pass value from child component to parent in TSX?

Parent component has this value={this.onUpdate(index)} and onUpdate does stuff with the value and index in the child component I have an input field that has onChange={this.handleText(index)} and this calls a method that wants to send the props…
jhonathan myers
  • 105
  • 1
  • 2
  • 12