When using function components in React, we may want to type their props with TypeScript. Overall there are two ways of making a React component type safe with TypeScript, however, let's start by converting the following JavaScript React component to a TypeScript React component as leading example: The straightforward yet most verbose way of…
Material UI for React, also called MUI, does not come with a native nested Dropdown menu. Here I want to share the nested dropdown component that I have used for several of my freelance projects when using Material UI. Before you can use it, you have to check out my implementation for a dropdown with Material UI (MUI) in React: In the Dropdown…
Material UI for React, also called MUI, does not come with a native Dropdown component. Here I want to share the dropdown component that I have used for several of my freelance projects when using Material UI. Before you can use it, you have to install its Material UI (MUI) dependencies: Next follows the implementation of a Material UI Dropdown…
A short React tutorial by example for beginners about creating a select in React. First of all, a select is just an HTML select element which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this select: In your browser, this select can already change its select state by…
A brief walkthrough on how to set up React Testing Library in Vitest when using Vite. The tutorial assumes that you have already created a React project with Vite either in JavaScript or TypeScript. Next, install Vitest on the command line: Then in your package.json file, add another script which will run the tests eventually: Create a test…
Sooner or later every React developer has to handle forms. The following tutorial will give you a comprehensive overview about forms in React. You will learn how to manage form state in React, the difference of controlled and uncontrolled forms (state vs reference), how to submit a form (e.g. callback handler), and how to reset a form (e.g. after…
When using React's useState Hook in TypeScript, the method usually infers the implicit type for the returned state from the provided argument automatically. In the following example, React's useState Hook in a function component knows that it deals with a number type. Hence the returned state (here: count ) has the type number in addition to…
A brief summary of how to use React's useRef Hook for using a ref with TypeScript. First, a ref in React is mainly used to assign a HTML element to it. The assigned HTML element gives us imperative read and write operations on it which allows us to programmatically call functions. Take the following example for focusing an input element: When using…
React Elements, Components, and Instances are different terms in React which work closely together. This guide will walk you through all three terms and explain them step by step. We will start off with the following code snippet as example: A React component is literally the declaration of a component as we see it in the previous code snippet…
You may have noticed the "as" prop when working with modern UI component libraries . Essentially the "as" prop allows you to replace rendered HTML elements in a React component from the outside by passing them in as props : Usually it is called "as" prop, however, one can see it also as "component", "element", "variant" prop -- or a combination…
