Questions tagged [react-typescript]
If you have any inquiries specifically about implementing TypeScript in your React code, feel free to ask us!
I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error messag ...
Currently, I am encountering an issue in my project where I am receiving a ReferenceError: localStorage is not defined. The technologies I am using for this project are Nextjs, Redux, and Typescript. https://i.stack.imgur.com/6l3vs.png I have declared ...
Here's how I am calling the Function <DynamicIcon name={"Money"}/> The DynamicIcon function implementation import React, {lazy, Suspense} from 'react'; export default function DynamicIcon(props: { name: string }) { const {name} = prop ...
I'm attempting to pass Props to React useState Hooks. Both of my props are required and should be numbers, but I keep receiving a Typescript error stating: Type 'string' is not assignable to type 'number'. TS2322 However, I am ...
With the removal of the children prop from React.FC type, what is the new approach for typing components? ...
In my component, I am initializing a Formik form by calling a function and passing the next/router object. This is how it looks: export default function Reset() { const router = useRouter(); const formik = useFormik(RecoverForm(router)); return ( ...
The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...
Whenever a user clicks on one of the orderBy buttons (such as name/email/date), a new rendered result should be fetched from the server by sending a new get request. The same applies to page pagination. Simply setting this.setState({ [thestate]: [newState ...
I'm encountering an issue when trying to access an object with an id in the code below. An error message stating 'Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'' is being displayed. In this case, ...
Encountering a TypeError: Object(...) is not a function in the following situation: To set up the state of a component with a specific Article (to be fetched from the backend in componentDidMount), I am implementing this approach // ArticlePage.tsx import ...
Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...
In my current project, I am utilizing React alongside Formik and TypeScript. The code snippet below demonstrates my usage of the withFormik Higher Order Component (HOC) in my forms: import React from 'react'; // Libraries import........ import { Contain ...
Could someone please help me understand the syntax used in this code snippet from mui/mui-x? export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPro>() => React.MutableRefObject<Api>; My interpretation is that it exports ...
Having just started learning typescript, I encountered difficulties passing a function from the parent component to another component as a prop. Despite searching online for solutions, I couldn't find anything helpful. Here is the JSX Code for refere ...
I'm struggling with developing a callback event handler function that can be passed down as a prop to my component. My objective: Allow users to provide a custom callback function that: always accepts the same argument an event (not a react/dom event han ...
I am currently working on an async combo box that retrieves options from an API. These options consist of an Id and a description. The combo box is integrated into a form that allows users to add or edit data. My desired functionality is to have the option ...
I am attempting to break down a custom type into its individual components: type CustomType<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & { aBunchOfProps: string; } The code appears as follows: const partitionProps = ...
I'm fairly new to using TypeScript, although I have a lot of experience with React (and prop-types). Recently, I've run into an issue when it comes to typing my components, specifically when another component is passed as a prop. I already have a Button c ...
Hey there, total newbie here... I'm currently working on a school project and I've hit a bit of a roadblock... I'm attempting to pass some props from one component to another, but for some reason, it's not working properly. The goal is to have a user se ...
Currently, I am dealing with persistence in a todo application developed using React and TypeScript. To achieve the desired persistence, I have implemented localStorage. Allow me to share some code snippets: const [todos, setTodos] = useState<todoMod ...
I seem to be facing an issue that I can't quite figure out. I have experience using ContextAPI without TypeScript, and I believe I'm implementing TypeScript correctly. However, something seems off as nothing happens when I call the setter. My goal is to dy ...
Can someone help me figure out how to use useReducer and useContext to manipulate global state? I specifically need to know how to delete comments using useReducer. Data Structures View the interface image here Sample Data Array export const listsData:IDa ...
When building a component with a Link, I am struggling to properly define the type for the href prop. import React from "react; import Link, { LinkProps } from "next/link"; type MyComponentProps = { href: Pick<LinkProps, "href&quo ...
My issue is with the tabs in my NavBar that keep reverting back to the primary main color (white) of my global theme. I tried setting an override on the component, which works initially, but resets to the primary main color after refreshing the page. Wheth ...
I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...
Currently, I'm using Next.js and React to develop an application where I am facing a challenge with opening a model using a function while passing data from the current state. I have been able to fetch updated data from my Supabase database successful ...
I am currently converting a React component to TypeScript. The component is making an API call, and although I believe my interfaces are correctly set up, I seem to be passing the types incorrectly. How can I resolve the two errors in the Parent componen ...
Below is my updated page.tsx code: import Aspects from '@/components/Aspects'; import FreeForm from '@/components/FreeForm'; import Lesson from '@/components/Lesson'; import React from 'react'; import { Route, Route ...
import { ReactNode, DetailedHTMLProps, FormHTMLAttributes } from "react"; import { FieldValues, SubmitHandler, useForm, UseFormReturn, } from "react-hook-form"; // I am looking to incorporate the DetailedHTMLProps<FormHTMLAt ...
I'm looking to streamline the relative url imports for my React TypeScript project. Instead of using something messy like ../../../contexts/AuthContext, I want to simplify it to just @contexts/AuthContexts. I attempted to update my tsconfig.json with the ...
Is there a way to detect a click on the <p> tag with the ID of "rightDisplayBtn"? I've tried using an onclick function and event listener, but neither seem to be working as expected. function addDetails() { hideModal(); addBook ...
Looking to customize the color of my React Material UI SpeedDial component from its default primary color. Any tips on how to change it to a different color? ...
I am currently working on a React application using Typescript and MaterialUI, where I have implemented a TextField component. My goal is to capture the value of the input HTML element when the user presses the enter key. To achieve this, I have created ...
I am facing an issue with throwing an error when attempting to register an account with a previously used email using TypeScript, Firebase, and React. Despite successfully registering an account, the problem arises when I try to use the same email with a d ...
I'm currently working on a TypeScript project using React. Although the code is functional, I keep encountering compiler errors with my ref. Here's an example of the code: Firstly, there's a higher-order component that handles errors: export class ErrorBo ...
As I work on my first Next.js website, I encountered a build error that persists both locally and on Vercel. Interestingly, I managed to achieve a successful local build at one point, but it no longer works. Here is an excerpt from my package.json: ...
Is there a way to simplify the code below without destructing the properties parameter? I want to set favicon.ico as the default image if properties.user_image is not provided "src={properties.user_image ? properties.user_image : "favicon.ico&qu ...
When I use mode: "dark" in my Material UI theme, it causes the color of my AppBar to become desaturated. Switching it to mode: "light" resolves this issue. This is how my theme is configured: const theme = createTheme({ palette: { ...
I'm interested in finding a way to save the user's selected answer for a radio button question and track the time they saved it. Is there a way to achieve this using HTML alone? Or would I need to utilize another coding language or package? Just to provi ...
I'm facing a problem while working with React TypeScript. I need to type the onChange event for a select element, but the data is coming from event.value instead of event.target.value. What should be the appropriate event to use in this case? Below is an ...
Topic: components: { MuiSelect: { variants: [ { props: { variant: 'dashed' }, style: { textTransform: 'none', border: `2px dashed red`, }, }, ], }, }, shown belo ...
Having trouble incorporating TypeScript into a custom React Form Component, and I keep encountering an error that I can't seem to resolve. Error message TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index ...
Currently, I'm developing a reusable component in React-Typescript and I am looking to validate my props OnClick and component as follows: Both onClick and component prop are optional. These props will only be passed to the component if they need to ...
I'm encountering an issue with passing dynamic state and setState into a function using Typescript. Despite trying to use Generics, I am facing complaints from Typescript. Here is the code snippet: const handleSelectTag = (tag: { color: string; label: st ...
Scenario using TypeScript 3.5.3 https://i.stack.imgur.com/wykd6.png link to interactive playground - TS 3.5.3 demo running successfully Example with TypeScript 3.7.2 https://i.stack.imgur.com/BPckB.png link to demo - TS 3.7.2 demo not functioning correctl ...
Exploring the realm of React, I am embarking on a project using NextJs + reduxjs/toolkit along with MUI and TypeScript. I have encountered a hurdle specifically related to TypeScript within reduxjs/toolkit. Here is the section from my file, **store/user-pr ...
Currently, I am incorporating two third-party TypeScript libraries into my project. Interestingly, both of these libraries expose a global variable with the same name through the Window interface. However, they offer different methods for interacting with ...
In my development work with React, I often utilize a props object structured like this: const props: { id: number, name?: string} = { id: 1 }; // 'name' property not defined const { id, name } = props; // the 'name' constant is now fore ...
export const FocusContext = React.createContext({ isUsingMouse: true, setIsUsingMouse: () => { console.error("FocusContext.Provider value not initialized"); }, }); export const FocusContextProvider = ({ children }) => { ...
Looking to convert the App component in this CodePen into a Functional component using Typescript. Encountering an error when attempting to run it: ERROR in src/App.tsx:13:14 TS2339: Property 'forceUpdateHandler' does not exist on type 'MutableRefObject& ...
I encountered a situation in my team's application where we need the ability to dynamically compose component wrappers (HOCs) without prior knowledge of all the wrapper interfaces. This is mostly needed for swapping out context providers when rendering lar ...
When using a theme in styled components, I am attempting to enable IntelliSense. In my code snippet below (index.tsx), I utilize ThemeProvider: import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } from 'styled-compon ...
I encountered a type conflict in my code, unsure whether a simple casting solution exists or if there is a more fundamental issue at play. import React from "react"; import TextField from "@mui/material/TextField"; import MenuItem from ...
The text editor is displaying the following message: Error: Type 'Promise' is not compatible with type 'void | Destructor'. This error occurs when calling checkUserLoggedIn() within the useEffect hook. To resolve this, I tried defining const checkUserL ...
https://i.stack.imgur.com/370ZP.png I'm working on a project that includes a verification email page. I'd like to add an email icon at the start of this interface within a circle shape, but I'm not sure how to achieve this. Any suggestions on how to place ...
I want to create a Union Type that is dependent on a nested property within my object. Take a look at the example provided below: type Foo = { abilities: { canManage: boolean } } type Bar = { abilities: { canManage: boolean ...
I am working on creating a custom data structure that allows me to store values with string keys within the union string | number | boolean: type FilterKey = string; type FilterValue = string | number | boolean; type Filters<K extends FilterKey, T exten ...
interface UserInformation { id:number; question: string; updated_at: string; deleted_at: string; old_question_id: string; horizontal: number; type_id: number; solving_explanation:string; ...
Currently I am in the process of building my initial TypeScript application after transitioning from a JavaScript background. While I am still adjusting to the concept of declaring types, there is a specific issue I am encountering at the moment. The sni ...