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
0 answers

ESLint indent rule with tsx file. Set indent rule for HTML node attributes

Is there a method to tell the indent rule of ESLint to accept that? What I want { … }} >
1
vote
1 answer

Best practice to style react components?

I started working on an app made with tsx. This app has a general stylesheet for everything and some of the components have inline styling. Personally it feels disorganized. I'm a biginner at css so I don't know what would be the best way to aproach…
Franco Hauva
  • 51
  • 1
  • 6
1
vote
1 answer

Why is yield not returning anything in Redux Saga?

I'm trying to use Redux Sagas to handle my login action. This is my sagas.ts: function* loginUserSaga() { const user: Login = yield take(actionTypes.LOGIN) const { username, password } = user.payload; const { data, status } = yield call(() =>…
1
vote
0 answers

how to get API data from an Array in Object? | React.ts

I am currently facing few problems when I am trying to render the API data to the browser. problem 1: Every time I tried to map through the data I got from API, I got an error saying: fictions.map is not a function , I what is happening here ,…
1
vote
2 answers

How can i add "ids" to data fetched from an outside api?

Good evening everyone, I have the following code for fetching the data from an api i prepared: useEffect(() => { const fetchData = async () => { const result = await axios(BOOKS_API); setBookData(result.data); }; …
MTomys
  • 87
  • 6
1
vote
1 answer

GraphQl query image.url getting null or ' ' (empty string)

Hi im Using GraphCms to use GraphQl API and when i try to use data of image.url i get null or a void string. I check and the assets are published. this my react code: i get this error on console: {"errors":[{"message":"input:1: Field \"image\" of…
1
vote
0 answers

Why the onChange event returning the previous value of dropdown?

I am trying to make a demo invoice with react and firebase. The goal is to autofill the item code and item price after getting the "itemname" value from dropdown. But at the initial change, its still showing the default values of the states. And…
1
vote
1 answer

How to render and test a component with mocked api

I've just set up a mock test of an api call but now am wanting to know how I could actually test this mocked data against my component. My api call will render a random set of information hence the mock. I want to render my Weather component and…
1
vote
2 answers

Navigation between screens with nested Navigation

Having a bit of trouble getting to navigate between screens in the nested navigation (Tabs and screens). Here is my code: This is the Tab Stack navigator const AppStack = () => { return (
mick1996
  • 516
  • 9
  • 31
1
vote
0 answers

draft-js Uncaught Error: Got unexpected null or undefined when change font style

Only in Mozilla Firefox when i input text in muiRichTextEditor with font style for example bold text added after when i input text show error DOMException: Node.removeChild: The node to be removed is not a child of this node or when i try change…
Nikita Kagan
  • 25
  • 1
  • 7
1
vote
0 answers

Intercept the closing of a modal conditionally

I am working on a React TypeScript webapplication which has lots of different forms. I am currently implementing a feature which displays a warning prompt when for example the user is trying to navigate away from the page if there are unsaved…
1
vote
0 answers

Websocket failed when first time rendering - React

new WebSocket() is failing when I firest render the application, but when I refresh the page it reconnects and works properly error -> WebSocket connection to 'ws://localhost:3001/?editorId=a3tq1&testId=noTestIdGiven' failed: Adding this for more…
1
vote
3 answers

How to import Lottie component?

Remix is prone to the following error when using import on top-level components TypeError: Cannot read properties of undefined (reading 'root'). So I've done as they recommend and have the following imports.server.tsx file. export * from…
rowen
  • 49
  • 6
1
vote
1 answer

How to make redux store in react typescript

I want to make a react redux using typescript but got an error. I use cra redux typescript template for the installation. I delete the counter reducer, and a new reducer using slice. I want to specify my error is in the initialState at userSlice.ts…
Hera Zeus
  • 123
  • 1
  • 10
1
vote
3 answers

React Best Practices: Where to *not* render a component?

I came across some code in review and had a question on best practices. Here's the scenario: I've got a Hyperlink component with a url prop. If for some reason url is falsy, Hyperlink renders null. simplified example: const Hyperlink = ({ url }) =>…
phasma
  • 624
  • 6
  • 18