Questions tagged [react-typescript]
For questions related to usages of TypeScript in React code.
1,319
questions
0
votes
0
answers
5
views
React/Typescript how do to load images?
I have a question about loading images into the reaction project. I use typescript and pass objects to the Table1 component as props. Some properties include the directories to load the images. My ...
-1
votes
0
answers
20
views
I am facing Invalid reCAPTCHA client id: when using Google ReCaptcha V3 in my react application
I am using Google ReCaptcha V3 for my react application. I am using a test version key. When the page is loaded, the reCaptcha appear properly in UI but in console getting error that "Invalid ...
0
votes
1
answer
43
views
ReferenceError: TextEncoder is not defined after update Axios@1.3.1
I had been using Axios v1.2.2 in my project without issues and I decided to update Axios to v1.3.1, after that my app continues running as before, however, all my tests started to fails... ALL OF THEM!...
1
vote
1
answer
49
views
React router 6+ : how to strongly type the params option in route loader?
Have router
export const router = createBrowserRouter([
{
path: '/todos/:todoId',
element: <Todo />,
loader: todoLoader,
}
]);
Have loader
export const loader: LoaderFunction = ...
1
vote
1
answer
44
views
Type of route name, route params in React Navigation Typescript
I am using ReactNavigation v6 along with typescript
I have created a helper functions as
export function navigate(routeName, routeParams) {
navigationRef.current?.navigate(routeName, routeParams);
}
...
0
votes
1
answer
18
views
Assigning Interface to Destructured Props in React with TypeScript
data.ts
export default [
{
id: 1,
name: 'Bertie Yates',
age: 29,
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws....
1
vote
1
answer
20
views
How to export a component attached to a component that uses React.forwardRef?
I'm building a UI system for input components and I'm looking to attach a component to another component that needs to use forwardRef. It normally works when the forwardRef isn't being used but I'm ...
0
votes
0
answers
25
views
My react typescript code does not render data from child to parent component in one go
interface Props {
handleNext2: () => void;
handleprevious2: () => void;
visible2: boolean;
onFinish: (values: any) => void;
}
const userRef = useRef<HTMLInputElement>();
const [...
1
vote
0
answers
19
views
TypeScript React Define a prop only if other prop already defined
I have an interface of input like
export interface IInputProps {
name: string
type: React.HTMLInputTypeAttribute
register: any
watch?: string
.
.
.
label?: string
additionalButton?: ...
0
votes
1
answer
64
views
Property 'length' does not exist on type 'string[]'.ts(2339)
I use VSCode, React/NextJS and Typescript on a windows machine.
A cat jumped on my laptop. After the cat left, I suddenly had my Typescript telling me that all the array methods do not exist.
Please ...
1
vote
0
answers
34
views
I am found 'subject' is of type 'unknown'. error during the npm start but code is run and working how to resolved it?
Object.entries(APIData).map(([key, subject], i) => {
return (
<div className="id-result" key={i}>
<div id="heading-result">
<h2 key={i} ...
-1
votes
1
answer
19
views
Property doesn't exist on type 'never' with React typescript during setting the state
I am facing an type issue in my React typescript project. Especially when setting the state using find method inside useEffect method. I have below code and also defined the type for that but still ...
1
vote
0
answers
25
views
Published styled-components UI library does not have access to extended theme types on the consumer side
I am creating UI library using styled-components. I am extending the DefaultTheme type to support custom themes that are needed for our use case. Both theme and theme definition is coming from a ...
1
vote
0
answers
14
views
React MUI MS Word like add row functionality to Table
How could I implement an add row functionality for MUI's Table, sg like in MS Word, when you hover over a row and on the side a little plus icon appears and you can insert a row in that position?
I ...
0
votes
1
answer
35
views
Sharing helper functions globally across the whole React app
How would one go about making global functions in React that you only have to import into one file that shares it across every page?
Right now I can have to import helper.tsx into each file where I ...
0
votes
1
answer
51
views
How to pass correct types to the react query useMutation hook?
Below is my code :
import { api } from 'api_v2/init';
import { DomainList, RedirectUrl, ZeusResponseSingle } from 'api_v2/zeus/types';
import { useMutation, useQueryClient } from 'react-query';
...
0
votes
1
answer
33
views
How to configure react typescript project having folder paths accessible like '@components/'
I want to change the relative url imports for react-typescript project. Basically from this crap ../../../contexts/AuthContext to just clean @contexts/AuthContexts.
I have tried the following with ...
0
votes
0
answers
22
views
Identifier expected error React TypeScript
I'm trying to use a map but I keep getting this error message an expected identifier which falls under the "." of the 4th line, could anyone provide some insight?
list.map((a)=>
<...
0
votes
0
answers
30
views
Remix and tailwind: Type instantiation is excessively deep and possibly infinite
I am making a react SSR project using Remix. I have configured tailwind which works properly. I am also trying to use tailwind-styled-components along with it. Everything runs smooth, there's just one ...
0
votes
1
answer
58
views
TypeScript, type for json response Object in Object[]
I have the response from API. I need processing that response and get values from that.
I can understand which type I should use for that.
Also when I tried this.filters[key] I fetched error
Element ...
0
votes
2
answers
94
views
+50
Group array of dates and format to schedule
I need to group an array of dates and then format the group of dates into a schedule format.
Possible labels could be:
Weekdays (from Mon to Fri)
Weekends (Sat and Sun)
Monday-Tuesday (range of days ...
0
votes
0
answers
15
views
Select OnChange - data do not update to database and revert back after refresh
*** I am using React Typescript
Name
Role
A
Admin
B
Member
Role is a select option dropdown, and it is from database. And not a form~
For example, I want to update A to Member, so I selected ...
0
votes
0
answers
8
views
Web Share API availability check causes typescript warning
I have a react functional component where I store a state value to define if the Web Share API is available in the users browser. I do that by initializing the state with:
const [canShare, ...
0
votes
1
answer
19
views
Typescript thinks that a variable is `possibly undefined` even when I specifically tested it to not be undefined before using it
I have a ternary operator checking for a few condition which is something like this:
!_.isUndefined(count) && count < 10 ? 12: count < 100 ? 28: 44
typescripts gives an error here ...
1
vote
0
answers
22
views
How to deal with a form that the button submit placed in parent component
I use react hook form, i have a form which my submit button placed in the parent component. my question is how i deal with the loading state of the button, when i try to call an api?. I have tried to ...
0
votes
0
answers
18
views
How to write test case for Class based component using react-testing-library with jest [closed]
please give a proper test example with code.
I can write for functional component but whenever I tried with class it throws some error like the component doesnt have construct..... React testing ...
1
vote
0
answers
26
views
Does setting state work with the useNavigate hook in React with react-router?
When a user submits a form with an image upload, they are redirected to an "uploading" route while they wait for the server. If there is an error, they should be directed back to the main ...
0
votes
2
answers
40
views
Use props from various interfaces, without naming them explicitly
Assuming I have this
interface ButtonProps {
children?: React.ReactNode,
backgroundColor?: Colors,
style?: object,
disabled?: boolean,
classes?: string
onClick?: () => void
}...
0
votes
0
answers
27
views
How to pass the component that should be used to represent the title in react?
I am currently working on a component and I need to make the title of the component as generic as possible. I wish to pass the component that would be used, quiet similar to Typography in react mui ...
0
votes
1
answer
22
views
Highstock dataGrouping not working with live data
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every ...
0
votes
0
answers
37
views
Typescript 7053 - Element implicitly has an 'any' type because expression of type 'keyof Year' can't be used to index type
I am trying to access a multi layered object based on some paramaters that I am getting, but the Typescript gives me typing errors as it appears that the "as keyof" workaround to passing &...
0
votes
2
answers
45
views
How to set defaultProps for object React Typescript
My problem:
When i set one of three optional values, then that only value is visible, other default values are gone.
type ComponentProps = {
title: string,
children: JSX.Element,
options: {
...
2
votes
1
answer
54
views
Can't declare interface in React, Typescript, & Vite
I have a project created with React, Typescript & Vite. It gives this error when I declare an interface for a component. I have included the files below that I think will be causing the issue. Let ...
0
votes
0
answers
46
views
how to pass component as argument?
without a typescript, I used this array to store routes:
const routes= [
{name: 'Quiz', path: '/quiz', component: () => <Quiz />},
];
export default routes;
But now I decided to use ...
1
vote
0
answers
25
views
Typescript Narrowing for Arrow Functions Inconsistent With Regular Variables [duplicate]
Simplified Examples:
Variable type narrowing
let a: string | number | boolean;
let b: string = '';
a = b;
This works and there are no warnings. However, if the example were:
let a: (arg: string | ...
0
votes
1
answer
33
views
Unit test not accepting new parameter type
I'm still really new to TypeScript so if I'm missing something obvious please let me know!!!
I'm having a problem with debugging my unit test and am stumped. I added a new type for my option label; it ...
0
votes
2
answers
94
views
TypeScript Error : Unexpected token `div`. Expected jsx identifier
I was building a website based on nextjs-typescript and tailwindcss
and I am encountering this weird error Expression expected.
I am also getting this in the terminal:
Unexpected token `div`. ...
0
votes
0
answers
14
views
Typescript Partial, Omit, Pick not working for Redux ToolTip API query
I've been creating an API for managing items on a page. I'm using the following this documentation here however, I'm having a couple of issues when sending the request.
As I'm passing the token andI'm ...
1
vote
1
answer
14
views
Type '{ children: never[]; title: string; content: Element; }' is not assignable to type 'IntrinsicAttributes & { title: any; }'
I am working on react website in typescript. I am using polaris wizard component, for that I have made on custom component called in which want to pass two arguments. but when I am calling that ...
0
votes
0
answers
15
views
How to mute remote user in Agora UI kit?
I am using AgoraUIKit from "agora-react-uikit". it is supposed to have the option to mute remote users as per their documentation, but it is not there as they showed in their demo example.
...
0
votes
1
answer
26
views
Component with function child yields error "Its return type 'ReactNode' is not a valid JSX element."
Consider the following react code: (codesandbox)
import type { ReactNode } from 'react';
type RenderCallbackProps = {
children: (o: { a: number }) => ReactNode,
};
function RenderCallback({ ...
0
votes
1
answer
15
views
Firebase Is Not Throwing The True Error with useSignInWithEmailAndPassword || React Web App Project
I am trying to throw an error when an email is in use using typescript, firebase and react. I have successfully registered an account, however when I type the same email with another password, ...
0
votes
1
answer
53
views
React Props TypeScript Generic: Type Value from Array of Object
I'm trying to build a custom Select component in React, the item list is sent via props.options (array of objects), since the object structure will vary, I need to define a key to access the value of ...
1
vote
1
answer
23
views
How would I type correct the AuthCOntextProvider function so that on creation Typescript will not give me errors?
I'm currently learning Typescript and moving all the code of my project with Type Safety from Typescript but I still don't understand certain things like this one.
I am only trying to correctly type ...
1
vote
1
answer
70
views
How to fix TypeScript issue: Property 'type' does not exist on type 'string' in React component
I have the following React typescript component:
type CustomTeaser = Exclude<Teaser, TeaserThree>;
const MyCustomBlock = ({ customItems }: Props) => {
const sixGridData = { items: ...
0
votes
2
answers
45
views
Typescript: This overload signature is not compatible with its implementation signature
The following code works if I exclude the setCurrentTab from the return interface useTabsReturnType but not if I include it and I don't know why
interface useTabsReturnType<T> {
currentTab: T;
...
1
vote
1
answer
26
views
How do I enforce type checks for TypeScript interface properties?
I'm working on a TypeScript React project and it has among others interfaces like this defined.
The problem is that this seems to do nothing more than tell me in VSCode, what the types of the object I'...
0
votes
3
answers
46
views
How can I force a string I provide to React props is of a certain type
I would like to provide a string to a prop in a react component coming from a library. But even though the library takes in any string, I want to make sure that the string I provide is of a certain ...
0
votes
0
answers
23
views
react typescript conditionally show icon by the tab name
i am trying to work out how to show conditionally show an icon next to a material-ui tab name, when a component in the tab has an error.
below is an **insert **of what i have tried (and failed on many ...
0
votes
1
answer
37
views
How to make Context work in React using Typescript? [duplicate]
I'm trying to set up a context provider for my Next.js application, in Typescript.
I've set up a context provider before in React in plain JS, so this is my shot at learning TS.
In the code below, the ...