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

React Typescript, Call a function from external script

In my react application, I fetch a custom javascript file from the server and append it as a script tag to the body of document. this newly added custom file contains a method called manipulator. Now in one of the components, I want to call that…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
3
votes
1 answer

react-beautiful-dnd: Cannot find drag handle element inside of Draggable

I have a component that receives two sets of data and is a react-beautiful-dnd DragDropContext as below render() { let index = -1; const dataSetOne = this.props.store!.getdata(1); const dataSetTwo = this.props.store!.getData(2); …
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
3
votes
1 answer

ReactJS render element by ref

I am trying to render an parent-component which has two children. The rendering of the children will switch, so one time there will be only the first child rendered, another time it will be the last and finally it will switch back to the first child…
marius
  • 1,118
  • 1
  • 18
  • 38
3
votes
3 answers

Spy on redux dispatch method

I am a newbie with jest and I am writing unit tests to my react application, which is using redux and which is written with Typescript. I have my container component with this piece of code: const mapDispatchToProps = (dispatch: Dispatch) =>…
quirimmo
  • 9,800
  • 3
  • 30
  • 45
3
votes
1 answer

Emmet expression expanded to single line

I'm learning to use Emmet with Visual Studio Code in TypeScript React files *.tsx. When I type div.buttons>button.something+button.something-else and hit TAB, it is expanded to the following:
Tao Gómez Gil
  • 2,228
  • 20
  • 36
2
votes
1 answer

How to make a React child component on a page scroll

When applying overflow-y-auto to a page it allows whole page to scroll instead of only a component Tried finding more in depth solutions online, but to no avail
DeeMeow
  • 701
  • 5
  • 7
2
votes
1 answer

Problem with prettier-plugin-tailwind for React Typescript

I'm trying to format tailwindcss code with prettier by using prettier-plugin-tailwind but it shows me this error and I don't know what to do. Error: \[error\] require() of ES Module ..../frontend/tailwind.config.js from…
2
votes
1 answer

Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

The following component throws me this error message at runtime when I try to render the table as Input value (editable field) with the additional warning given below. Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in…
2
votes
2 answers

Getting error on updating boolean state in Redux

My state data: options: [ { id: 1, name: "Sale", isTrue: false, }, { id: 2, name: "New in", isTrue: false, }, ], And, in reducers I have: closeOptions: (state) => { …
ndm
  • 23
  • 4
2
votes
0 answers

Keyboard closes after every keypress in TextInput in react native?

I am working on a react-native app in which I am facing a problem with the TextInput. I am working on TSX(Typescript) and I have used react-native's textInput. Whenever I press on a key on the keyboard, the keyboard automatically closes down. I have…
2
votes
4 answers

How to import Bootstrap into Vite projects

How do I correctly import Bootstrap inside a react-ts project opened with Vite? What are the correct commands? I had this error in the browser after importing the bootstrap in my App.tsx: The custom.css file looks like this: $theme-colors: ( …
Marcb7
  • 79
  • 1
  • 7
2
votes
1 answer

React data overridden in Data Table after filtering data

React Data overridden in Data table after filtering data Tech stack used: React typescript and GraphQL (apollo client). We have used react-data-table-component, mui/material. In this both modules data is overridden after data is filtered. Not…
2
votes
1 answer

Debounce in redux-tool-kit

I'm Trying to debounce below API call with using lodash debounce export const getProfile = createAsyncThunk( GET_PROFILE, async (amount: any, { rejectWithValue }: any) => { try { const response = await API.Get(EndPoint.GET_PROFILE) …
Chanaka
  • 760
  • 1
  • 10
  • 21
2
votes
1 answer

Simple Bridge from React Native main app from swift

Trying to bubble a function I made in Swift file to the main App.tsx HelloWorld.swift @objc(HelloWorldModule) class HelloWorldModule: NSObject { @objc func ShowMessage()->Void { print("hello world") } } HelloWorld.m #import…
bombombs
  • 593
  • 1
  • 13
2
votes
0 answers

How can I specify the generic type in a TSX component?

I have a generic component class that I want to use within another component. Is there a way to specify the type of the generic? Example class GenericComponent extends React.Component<{ value: T; update: T => void; }, any> { …
Matthew Jensen
  • 132
  • 1
  • 5