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

How to define props in Typescript when a parent component injects props in its children?

When a component clones its children to inject props into them, how to define the children props type? I'm receiving an error cause injectedProps is expected in Child const Parent: React.SFC = ({ children }) => (
…
Ramon Balthazar
  • 3,907
  • 3
  • 25
  • 34
4
votes
2 answers

How can I fix the "Failed to parse source map from ..." errors in my ReactJS/TS project

I have a ReactJS project where I wanted to use a Barcode-Scanner npm module with the name html5-qrcode, but I always get this error: Failed to parse source map from 'C:\...\node_modules\html5-qrcode\third_party\index.js.map' file: Error: ENOENT: no…
Cinc-B
  • 121
  • 2
  • 9
4
votes
0 answers

Create screens with nested navigators using dynamic data

I have been trying to nest multiple navigators in React Native without success. What I want is a BottomTabsNavigator with: Home Psalmen: regular page is grid with 150 items and when clicked goes to details psalmen/:psalm Vers: click on a vers…
Joël
  • 51
  • 3
4
votes
3 answers

How to apply useRef() in React TS?

Goal: Get value from the textbox when you click on the button Problem: The value don't display in the console. "Uncaught Error: Function components cannot have string refs. We recommend using useRef() instead" How do you apply useRef() in this…
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145
4
votes
1 answer

How to use manual mock with typescript, react and jest?

I am trying to use jest to mock the return value of a hook used by a React component, but I can't get it to work. Consider the price tag component. All it does is render the price returned from the usePrice hook. In usePrice.ts export default…
Emric Månsson
  • 495
  • 6
  • 15
4
votes
1 answer

Render one of the children based on condition

I am trying to create a switch HOC for conditional rendering which behaves like a switch statement in ReactTS Hello World …
Nikhil Goyal
  • 1,945
  • 1
  • 9
  • 17
4
votes
2 answers

create-react-app typescript won't run npm start

I am trying to create-react-app with typescript, but there seems to be a problem with JSX and TS. I read a couple of possible solutions, that didn't work out for me. I have: npm: version 16.14.7 node: version 14.8.0 I used npx create-react-app…
idkwhatsgoingon
  • 658
  • 4
  • 22
4
votes
1 answer

Is it Possible to use Enzyme testing with Next js (SSR)?

It's My first Nextjs project with SSR. When Integrating Enzyme For Reactjs UI Testing. it could not run due to "React' refers to a UMD global, but the current file is a module. Consider adding an import instead." but it's works when i am using…
Rizwan
  • 155
  • 2
  • 10
4
votes
1 answer

'Property does not exist' in a Functional Component with added functional components as properties to it?

I use React with Typescript and a functional approach. const Divider: React.FunctionComponent = (props: CardDividerProps) => (
divider
); const Card: React.FunctionComponent = (props: CardProps)…
Nikolai
  • 555
  • 7
  • 17
4
votes
0 answers

In React Native, how can I adjust translation values when scaling an animated view, so that scaling appears to have an origin at an arbitrary point?

I am using PanGestureHandler and PinchGestureHandler to allow a large image to be panned and zoomed in/out on the screen. However, once I introduce the scaling transformation, panning behaves differently. I have three goals with this…
Conor Strejcek
  • 382
  • 2
  • 15
4
votes
1 answer

react-autosuggest with debounce and distinctUntilChanged

Intent: I'm trying to achieve an ideal search field that will not make any API calls untill: The debounce time of 350ms has been reached AND until there's a change in the value of the input field. What I've tried so far: I've used a Subject to…
SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
4
votes
1 answer

Conditional Rendering in React application using tsx

I am trying to render a view to the user based on the state they are in a React application using the default React template that Microsoft provides. Here is the error I am getting: picture of error Here is my code: import * as React from…
MaholeycowDev
  • 43
  • 5
3
votes
0 answers

How to write decorator in typescript for storybook?

I am new to storybook as well as typescript, I am stuck, when creating a decorator which takes two parameters Story and context. const CustomDecorator = (Story, context) => { console.log("My Decorator"); return ( ); }; const…
Harsh Narwariya
  • 498
  • 2
  • 11
3
votes
1 answer

Custom Hooks with TypeScript - return value

I'm trying to experiment custom Hooks with TS (quite new on both). This useOption should take etiher a number or a boolean, and return the value with the same type, and the changer function. This because an option should be with 'range'…
ncasteln
  • 109
  • 1
  • 5
3
votes
0 answers

DOMException: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker

I unable to solve this issue while working on react ts pwa app. Since the current scenarios is : I am using 2 application, one is Global app and another one is children app. The children app is opening in iFrame. when I perform the download file…
Mukesh Kushwah
  • 81
  • 5
1 2
3
…
37 38