To pass parameters via Get, it was necessary to assemble a string from the selected Checkbox values. In the project, I used Checkbox from Fluent UI, but the approach is similar for another component. Actually, this is not even about React, but about TypeScript.

As it turned out, FluentUI DatePicker for React doesn't contain a built-in German localization. If you need one, you can use my version.

In HTML tag 'input type = number' is not very user friendly. So, I always implement it as a text with transformation text to number.

If you want to customize the styles for filter panels in DataGrid from Material UI (MUI), you need to know, where it is. And only so. To update these styles you can only with the object properties.

I found a very cool collection of flags in SVG format. It can be used as CDN or added to a project with npm. The library is called ‘flag-icons’. The flags are in 2 formats – 4x4 and 1x1.

The Date is an object in JavaScript and TypeScript. When you have some spare time, try to compare 2 objects, you will find a lot of interesting things 🙂 Obviously, you need to compare not object, but their properties.

Sometimes I like to use calculate different measures for one or another site. Last weekend I read about Lighthouse – it’s a part of DevTools in Google Chrome. I have already forgotten that I have such a powerful tool in my pocket and don’t use it. What is Lighthouse? Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

DataGrid looks like a table, but it's another component, it consists of multiple div-elements. But for a user it's a table and common table attributes are often required. One of them is striped rows. Below there's an example how to implement it.

Obviously, it's an ordinary case, when you get an array of objects and you need to create for the reply the array of other Objects, but you need to initialize it on load. For React developers it can be often used with useEffect or componentDidMount.

To modify the size of the TextField component in Material UI, you can make several things. The basic modification is obvious, but other ones are not so. By default, the component TextField is rather big and it's really a common task to make it less.