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
1
vote
1 answer

react - Images in public return 404 since added proxy

I set my images inside the public/avatars and render them via my app run on : http://localhost:3001 it works fine, but since I added a proxy inside the package.json: proxy: http://localhost:3000 the images return…
H.Hattab
  • 113
  • 10
1
vote
1 answer

What is wrong with typescript deconstructing operator in this snippet?

My IDE is showing 2 errors in this typescript (tsx) snippet: // @ next line: TS2300: Duplicate identifier 'boolean'. const SlidesControl = ({ previous: boolean, next: boolean }) => { return ( // @ next line: TS2304: Cannot find names…
dragonmnl
  • 14,578
  • 33
  • 84
  • 129
1
vote
1 answer

ReactJS/Typescript : Typing and properties of children

I have a component which is a grid (). In this grid, the latter can have children who are also components that I created. I would like to know if it is possible to: Add properties to my components only if they are used as a child component of my…
Answerrer
  • 2,803
  • 4
  • 8
  • 18
1
vote
1 answer

Property 'detail' does not exist on type '{}'.ts(2339)

I get the error in the title in code below, how do I fix it? Any help is appreciated! import { useHistory } from "react-router-dom"; let history = useHistory(); history.push({ pathname: '/otherPage', state: { detail: id } …
lo7
  • 425
  • 2
  • 8
  • 21
1
vote
1 answer

(React/TypeScript) add onKeyDownEventHandler into a canvas element

I want to add a onKeyDownEventHandler into my canvas element, but it didn't go well, the redux structure has been correctly set and I checked react-redux DevTool the code doesn't execute the action. Below is my code: reducers.ts export const…
Yin
  • 13
  • 3
1
vote
1 answer

How to modify children of a given JSX.Element property?

I have the following component: import React, { ReactElement } from 'react' interface Props { icon: JSX.Element; // should accept only svg fill?: string; stroke?: string; } export default function AppIcon(props: Props): ReactElement { //…
Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
1
vote
1 answer

How to change default icon of a ContextualMenu

Referring to examples of ContextualMenu in https://developer.microsoft.com/en-us/fabric#/controls/web/contextualmenu, I want to change the default icon (ChevronDown) to ChevronUp. How do I do that? I tried a few options by providing a styles…
1
vote
1 answer

How can i set the icon fixed on the right side of the box?

I use MaterialUi and ReactTSX. When i import the Chip and display it. It shows the deleteIcon on the right side of the label but i want it at the right side of the box. show problem
user11425419
1
vote
1 answer

Unsightly problem with "argument of type string ist not assignable to param of custom type"

i got a working typescript code, see the snippet. Problem with TS is, that it states the code as falsy with the message: Argument of type 'string' is not assignable to parameter of type 'SetStateAction<"vertical" | "horizontal" |…
drecunion
  • 121
  • 8
1
vote
1 answer

React typescript FC vs Component

I am using react with typescript. What is the difference between FC vs Component? Which is best practice? Use cases for each? Does Component is deprecated since react latest version with hooks is not using classes?
Tal
  • 613
  • 1
  • 7
  • 19
1
vote
1 answer

Reach Router, render nested route component

I am using Reach router in the React app (with typescript). using nested routes I got stuck in how to render the nested component as a separate (in separate view) component and not as the child at the bottom of the parent component. The code is…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
1
vote
1 answer

onChange monitoring user input into TextField component from Office-UI-Fabric on every render and displaying incorrect output

I am trying to implement a UI where i take user input through the TextField component from Office-ui-fabric. I use onChange to monitor value. However, as i type in user input say the number '100' i can see the function rendered each time which i…
novice_coder
  • 147
  • 2
  • 10
1
vote
1 answer

Which tasks are needed to build my reactTS application to bamboo and deploy it to nexus?

I have a react application that works fine locally both build and start. I am trying to build the application from my bitbucket repo into bamboo and further deploy it to nexus through a task script. I am new to bamboo and I have problem finding any…
1
vote
0 answers

React.useRef and using JSX.Element to get object subelements

I have a JSX.Element refinitilized like this that is containg a SVG Element: var fontawesomeIcon = React.useRef(
Christophe
  • 2,131
  • 2
  • 21
  • 35
1
vote
1 answer

Reactjs Material load defaultValue in TextField & Cannot read property 'map' of undefined

I have two issue here. Cant load defaultValue in TextField. I'm using reactjs material When I start typing in input TextField. It's throwing error in below Cannot read property 'map' of undefined Can anyone tell where I made…
SKL
  • 1,243
  • 4
  • 32
  • 53