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

Passing argument from parent component to customize MUI Button color (React-typescript)

I have been implementing MUI (v5) on a create-React-App with typescript. I have a customed-theme and all. I want to create a MyButton Component that takes a buttonType props (typeof string) which refer to my theme.palette and pass it to the…
Lyly
  • 43
  • 7
1
vote
1 answer

react-data-table-component set model of expanded component

There is react-data-table-component that works fine, Need to pass row type(typescript model) to Detail component which rendered when row expanded. Detail: export const Detail = (row: certificates) => { //it works fine if its set as 'any' return ( …
TyForHelpDude
  • 4,828
  • 10
  • 48
  • 96
1
vote
1 answer

Firebase React returns undefined on firebase.currentUser.displayName after refreshing page

I'm creating a new account in Signup.tsx and redirecting to the dashboard after success, this way try { await auth.createUserWithEmailAndPassword( emailRef.current!.value, passwordRef.current!.value, …
1
vote
0 answers

Accepting only directories in with react-tsx

I need to accept local directories paths from the user, I am using react with typescript (with ). I saw many posts recommending to add the directory and webkitdirectory attributes to the input tag, but this is giving me a typescript error (Property…
1
vote
3 answers

Ignore other react props if one prop is true

Im trying to make it so that if on prop is true, all others will be ignored. My current react code looks like this: ; But this causes problems because in my Component.tsx file because…
KyleRifqi
  • 489
  • 2
  • 15
1
vote
1 answer

Send Post Data by using Axios in React TS

Goal: Use Axios to send a post from client to backend Problem: Axios code cannot send data to the backend while fetch code can make it. The data, in relation, to axios will be id = 0 and firstname = null at backend It works well when I use fetch…
HelloWorld1
  • 13,688
  • 28
  • 82
  • 145
1
vote
1 answer

Unable to find declaration file for module 'react-axios'

Here is an axios module for react, it called react-axios. I followed the document to install the modules. But when I import the module in my component, TS show me this…
Kirito
  • 11
  • 1
1
vote
0 answers

TS: Uncaught Reference error with async actions / services in react ts

I am working on react typescript project where i have login action for user authentication. It is working fine and return result. Below is my function export const login = (email: string, password: string) => { return…
Afzal Ali
  • 880
  • 8
  • 25
1
vote
1 answer

Using Styled-Components `.attrs` with TypeScript (Props don't merge)

When I do this: const Button = styled.button.attrs((props:ButtonProps) => ({ primary: props.buttonType === 'primary', secondary: props.buttonType === 'secondary', critical: props.buttonType === 'critical', small: props.buttonSize ===…
1
vote
1 answer

How to overwrite internal component state from the outside

I have a rather simple NumberInput component/control which handles its internal state (its current value) with useState. The "outside world" is not interested in this state but only receives updates via the callback function onSubmit which is called…
suamikim
  • 5,350
  • 9
  • 40
  • 75
1
vote
1 answer

How to convert value inside functional component based on generic type

I have the following component: // ... type StringOrNumber = string | number; type InputProps = { value: T; onSubmit: (value: T) => void; }; export default function Input(props:…
suamikim
  • 5,350
  • 9
  • 40
  • 75
1
vote
1 answer

aws-sdk unable to create bucket No 'Access-Control-Allow-Origin' header is present on the requested resource

I am unable to create bucket in AWS S3 server using aws-sdk. But I can add new folder and file in existing bucket but not able to create new. Below code, which I used to create a new bucket. import AWS from "aws-sdk"; AWS.config.update({ region:…
Tula Vinay
  • 11
  • 2
1
vote
1 answer

Record type of nested prop of type

I had the following type in one of my interfaces: export interface CardProps { component?: | 'BatteryHealth' | 'DriveHealth' | 'SSDTrim' | 'ThermalDashboard' | 'MainFeature' | 'DiskSpace' | 'Benchmark' | …
Darkbound
  • 3,026
  • 7
  • 34
  • 72
1
vote
0 answers

React Router Gets Stuck on Certain Route When Redirecting Directly After Refresh

I'm using a React and Typescript with a Crema template. I was able to figure their routing configuration and successfully implemented more routes on several different pages. My Issue But I just encountered a bug where if I refresh the page and click…
Mainly Karma
  • 437
  • 2
  • 12
1
vote
1 answer

Property 'original_title' does not exist on type 'string' > TypeScript

So, I am creating a website with typescript and redux and I am pulling an API from TMDB (the movie database), I have setup my redux and i got the store, after using use selector and useDispatch I should be able to map through the array, but when I…
Faruk Suljagic
  • 88
  • 1
  • 1
  • 8