simple-select | a lightweight DOM element selector

I'm fetching data in index.tsx which I later on pass to FormOne just as following and I'm then able to use the data in FormOne using props.data

I want to save the progress state of Mobile Stepper, so that when user logged out, the user can resume from the place where he left. If progress bar is filled 2% then when next time the user login he should resume from 2% not from 0. Here is the code:

I have created a select component using Mui but whenever I click on any option from the select dropdown then it's storing correctly in the state that I have defined but it's not displaying in the select box.

Here is my JSON object:

Im Learning ReactJs ... I want Design a Form (Like Section Exprience in Linkedin) with React Hook Form, Material Ui and TypeScript.

I Faced a Error with this text: 'onChange' is specified more than once, so this usage will be overwritten.

my function in onChange, doesn't work. I want to register with react hook form. how can I solve this error?

I am trying to implement my own icon for material ui select component. So far i have managed to change default icon with use of "IconComponent" MU select attribute.

But the newIcon is not rotating while menu list is opened, as in case of default icon, and moreover, menu with values wont open upon clicking it. ListIteam appear only if I click the select component itself, but not the new icon.

I have tested two different icons (anotherIcon and newIcon) and the problem remains.

For my project, I'm using MUI's Select Component with the LanguageIcon as the IconComponent.
What I'm trying to do is turn this icon white (it's black per default), but I can't get it to work.

I tried to follow this solution, but it won't work for me.
import { makeStyles } from '@mui/styles'; throws "Module not found: Can't resolve '@mui/styles'" and on their website it says @mui/styles is deprecated.

This is what I currently have:

I have an app that displays some images. There are 12 images in total and each page displays 10 max. Number those images from 1 to 12, when change to page 2 you will see 2 wrappers showing image 1 and 2 instead of 11 and 12 for a very short time(you will get the right image eventually). This only happens when you change the page for the first time.
I'm confused about this behavior. Here's my website. And here is the GitHub repo.
My guess is that it's related to how React schedules updates. Or maybe I implement this functionality wrongly. It's harmless but you will be upset to have this kind of experience browsing the web.

Here's the component. I leave out the css part and something not that relevant to make the code shorter.

The user can choose the category in which another select will appear depending on what was selected. I create the 2nd component in another .js. I can already view the data but how can I pass the value of my 2nd component to the parent component?

I wanted to pass the value of the select from the size1,js to the demo.js

Link: https://codesandbox.io/s/category-selection-oiu7d

demo.js

I’ve read that you can’t really pass props upwards like that, but you can do so through functions. I went and found a workaround and it worked.

My problem is: I’m trying to get data to App from 2 layers down - App > DataInput > ValidateUser - so I can pass it over from App to 2 other different components that have nothing to do with filling the form.

I can get the data from ValidateUser back to DataInput, just before sending it to App I’m logging the result and it’s all as expected. The problem begins when I try to send it to App and the data I receive is undefined.

I checked a few times to see if I was making a typo or logical error while implementing the second data call. Unless I completely missed it, nothing. I started to think that, maybe, then, the problem might be with the execution order. App is read first so, maybe, it wasn’t getting updated once I assigned the value further down the execution line? But then, I’m updating the state when I click the button and it prints out the undefined and the blank object again being called from App while I can see the object is fully filled when it’s last called over the handler in DataInput…

I’m probably missing something here.

App