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
2
votes
2 answers

Type A is not assignable to type B in typescript with antdesign

Hi guys I was writing this code in typescript with using ant design and I got this issue (TS2322). I wanted to use 'Input' from 'Ant Design' and set the first value as null. After that I was gonna put it in the Input it occurs some errors. Does…
Olivia
  • 97
  • 1
  • 7
2
votes
1 answer

Jest: Continue testing when expected error is thrown on button click

I am trying to test a React error boundary (with react-error-boundary library) by creating a button (to test that the code inside the library is displayed) and when clicked I want to verify that the error text is displayed, here are some…
LuisEnMarroquin
  • 1,609
  • 1
  • 14
  • 26
2
votes
2 answers

How to render custom elements for each item in an object (Map data structure) in React TS?

I've been using this method to render multiple custom elements from an array but this is my first time doing it using a map data structure. It compiles fine but renders nothing. I've set up a codesandbox here. import "./styles.css"; import React…
Samuel Zrna
  • 149
  • 1
  • 1
  • 9
2
votes
2 answers

setState with return in TYPESCRIPT

Oops, my friends, I have this "problem" when using setState, as setState is not asynchronous I can't use it the way I want. I set the value and when calling the function to send back the value returns with "delay". How do I resolve this? const…
2
votes
1 answer

Show value from input box by pressing the button

Goal: Show the value of the element id ttt in console when you press the button "showvalue" Problem: The code won't work what part of the code am I missing? Stackblitz: https://stackblitz.com/edit/react-ts-sgczgk? Info: Newbie in React TS Thank…
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145
2
votes
1 answer

Eslint + typescript paths aliasing - Unable to resolve path to module

I add typescript config for paths: { //..... "moduleResolution": "node", { "baseUrl": "app", "paths": { "@app/*": ["*"], "@folder/*": ["folder/*"], //Other paths }, } Added configuration to webpack: resolve: { extensions: [".tsx",…
Alina
  • 21
  • 1
  • 2
2
votes
0 answers

Filter users by unique id and higher score

Thank you in advance. First of all, I`ll try to explain my problem. I have a history of users (array) and many days in this history (also arrays) and every day has users (objects) which I take from get query. It turns out such a structure: [ [ {}…
2
votes
0 answers

react-navigation [v6] drawer and stack nesting issues

Like the most common use case, I want to have a drawer in my react-native application where, from all screens header I can open/close the drawer, navigate to them. Also, each screen has an option (button, card,...) that on press should navigate to…
2
votes
1 answer

How to import autobind from 'office-ui-fabric-react?

How to import autobind from 'office-ui-fabric-react? I tried by using this method import { autobind } from 'office-ui-fabric-react/lib/Utilities'; But it showing error like Module '"office-ui-fabric-react/lib/Utilities"' has no exported member…
2
votes
1 answer

How to get or update the value in variables in reactjs like angular?

Is there any option to do something like this below? toggle class to a specific element in reactjs this is function variable: any onclick() { this.variable = 'new value'; }
Ponsakthi Anand
  • 305
  • 2
  • 13
2
votes
1 answer

How to style material-ui components with emotion

I want to style material Ui Tooltip component and I want to target it's tooltip and arrow classes, how I should add styles to them with emotion? I tried to follow this guide:…
2
votes
1 answer

Error trying using recharts in typescript project

Hi i have installed recharts and @types/recharts in my project. Now when i try to import any chart to a component i have this error: Failed to compile. /Users/rmanreza/Projects/portfolio/node_modules/recharts/types/cartesian/YAxis.d.ts TypeScript…
2
votes
0 answers

How do I add Stockfish.js to my react (+ typescript) application?

I'm trying to build a chess application where you can play vs stockfish. I tried implementing stockfish with stockfish.js (github link) but I couldn't get it to work. I tried the following approaches: Add stockfish to public folder and enable it in…
Ties Mulder
  • 83
  • 1
  • 8
2
votes
1 answer

All react-native-paper components throw type error regarding Accessibility API

In my react app using react-native-paper with typescript all the paper components throw the type Error; type 'The props used' is missing the following properties from type 'Pick
2
votes
1 answer

Can't have a children prop array with only one child?

I'm quite new to React and tried taking a shot at creating a Navbar. But I ran into a problem which I can't seem to wrap my head around I've got following Component: interface Props { children: React.ReactElement[]; } export class…
Jan
  • 65
  • 5