For the development of a Ract component I used MUI Autocomplete. I got the array of objects from SharePoint list and used this data as a parameter for options. Actually, you can use any source.
But I had a lot of warnings in console.

MUI: The value provided to Autocomplete is invalid.
None of the options match with {"Id":0,"Title":"","ProjectDescription":"","AvailableObjects":[]}.
You can use the isOptionEqualToValue prop to customize the equality test.

I used a TextField component in MUI and wanted to make a label always visible. By default, it hides, when cursor is out (onBlur) and the value is empty. Very strange and not what I wanted to.

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.