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

How to see react scripts ESLint errors with TSLint

The react-script uses typescript-eslint internally which trows warnings/error and you see it in the terminal where the app is running. I did create react app with create-react-app --typescript and did set up a tslint.json as follow: { …
0
votes
1 answer

How to make use declaration file for a React component?

I would like to separate the type and interface definitions from my component code. This would make the jsx file smaller and easier te read. I created the following two files: ./Header/Header.d.ts export type HeaderProps = { logo?:…
Remi
  • 4,663
  • 11
  • 49
  • 84
0
votes
1 answer

Can I do typescript props validation for a component wrapped inside a HOC?

I am writing my components with a React HOC but it is giving error while using typescript for validating props. the error is as follow Type '{ type: string; imgUrl: any; vidUrl: any; }' is not assignable to type 'IntrinsicAttributes & Pick & { …
0
votes
1 answer

Arbitrarily injecting styles with styled-components

I'm populating a grid with various controls (in this example: up-down counter and a text box). Currently, I'm injecting styles in the cls member (in this example can be e.g. wide-input and narrow-input): render(): ReactNode { const input:…
Tar
  • 8,529
  • 9
  • 56
  • 127
0
votes
2 answers

How do i add a dropdown to useEffects?

I am new to react and office-ui-fabric and have been having issues understanding how to add a dropdown to useEffect. The user selects options from the dropdown and i need useEffects to monitor the value selected to another user so that i can send…
novice_coder
  • 147
  • 2
  • 10
0
votes
2 answers

Reactjs search / filter function

I tried to implement search/filter function on reactjs app. User can search anything and object should return based on search value. Search logic implemented in handleChange. Can anyone let me know where I made mistake? It's doesn't return any…
SKL
  • 1,243
  • 4
  • 32
  • 53
0
votes
2 answers

How to extract the "enum type" out of a properties from an interface?

I have a React interface, ex: TextStyle. And I need to use a dynamic value like textAlign. But this text align has to match the interface enum. How do I do this? I have tried typeof TextStyle["textAlign"] but I get 'TextStyle' only refers to a type,…
hugomosh
  • 402
  • 6
  • 15
0
votes
1 answer

Reactjs Material: How to pass to props to reactjs material dialog

How to pass props to reactjs material dialog? if I do < FormDialog value={this.prop.value} />, throwing Type '{ value: any; }' is not assignable to type 'IntrinsicAttributes' error. How i can assign type for FormDialog() or any other way to pass…
SKL
  • 1,243
  • 4
  • 32
  • 53
0
votes
2 answers

Reactjs Typerscript: Property 'toLowerCase' does not exist on type 'never'

Im trying to filter data with multiple key value in reactjs with tsx. Cards.tsx is a parent component and ShipmentCard.tsx is a child. I'm getting Property 'toLowerCase' does not exist on type 'never' error. I just want to return the related object…
SKL
  • 1,243
  • 4
  • 32
  • 53
0
votes
1 answer

React-Redux Reducer Doesn't Get Called

I have set up my state, actions, reducers, types (using TypeScript), and a few calls to these actions. The action calls the appropriate function (I'm not sure they truly return the data), but the reducer for this state slice does not every get…
jkost4
  • 73
  • 1
  • 8
0
votes
1 answer

TSX: Nested recursive Array of objects interface

I can't get my typescript interface to work with a react tsx component. I've got all the items inside an array of objects with possible sub items. I've tried lots of different interfaces but always ended up with some kind of error, currently only…
josias
  • 1,326
  • 1
  • 12
  • 39
0
votes
1 answer

TypeScript won't select the right override

I just created a dynamic component what should look like the next: /* Should inherit all InputComponent properties. DefaultComponent should be the default component props value. */ My current…
0
votes
2 answers

Prettier doesn't parse Typescript type cast

I'm using Prettier 1.17.1 and TypeScript 3.4.5 with create-react-app. I'm getting the error below each time I try to use the x as T syntax in TypeScript for type cast: src/Form.tsx [error] src/Form.tsx: SyntaxError: Unexpected identifier…
pietro909
  • 1,811
  • 1
  • 19
  • 26
0
votes
1 answer

Linting React+Typescript project with ESlint

I read in an article that the TypeScript core team explaining ESLint has a more performant architecture than TSLint. And on the other hand @typescript-eslint/parser makes a more convenient AST which works the best alongside…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
0
votes
0 answers

Svg Icon in anchor Tag is Clickable but not working in Microsoft Edge or IE 11

I have a svg icon in my anchor tag in which i have a click event for anchor tag in my React application.My issue is like when i click on anchor tag its is working fine both in edge and chrome. But when i click on svg icon its is working fine in…
Gireesh kumar
  • 58
  • 1
  • 12