is this because callbacks go into the callback queue ie. lower priority than the microtask queue ?

promises and mutation observer go into the microtask queue and have higher higher priority, are DOM mutations the "important tasks" that James is refering to ??

is this because promises go into the microtask queue ( higher priority than the callback queue ) ??

this is also applicable tor .catch() . since catch() is just a special case of .then() ie. .then(null , failure handler). Check the description of promise.catch in the "A Spoonful of Sugar" chapter.

Remove a file from staging area git rm --cached <filename>.......

The callback seems to receive 2 arguments. e and reactChild

In the past I got the selected value using e.target.value This seems to work.

Not sure of the use of the reactChild element that the callback receives.

Another important note regarding recording the recorded value of the select is noted in the "value" prop explanition ( below, on this very page )

Are you getting an error along the lines of cityConverter is not a function ?

Dont miss a single ; ( semicolon ) especially after the cityConverter object, this should solve your problem. It is a simple JS parsing problem, nothing related with Firestore or your understanding of Firestore

notice the recursion in the below code block.

Clean form code. Pretty elegant + covers best practices. This video also showed me some previously unknown HTML features.

https://www.youtube.com/watch?v=tIdNeoHniEY

You might want to turn it into a span for any number of reasons. eg if you want one word in a sentence to be another color / style eg. I wear a red hat

<Typography component="div" > Contact Details : <Typography component="div" display="inline" variant="body2" color="black"> elroinoronha2@gmail.com </Typography> </Typography>

(copy it to a code editor for the code to make sense)

is a good solution since it defeats the "h1 cannot be a child of h1" DOM error + let us use the sx prop.

We would not be able to use sx prop to style the inline part if we would use the native <span> component ie. <Typography > yo mama <span> so fat </span> </Typography>

You would have to use inline style styling instead.

This <Box/> method is the preffered way of doing it. The <Paper/> method too is a good idea. The basic reasoning is that only MUI components support the sx prop ie. only they can fully use the MUI systems features. Thus, it doesnt make sense to use the native <img/> component in the markup, as it does not support sx

The SX prop does not work with non MUI components eg. native <img/> component. To style this, you will have to use the native inline styling ie. <img style=" ............". /> If you want to style the img and use some MUI system specific features, ie. you need to use sx ; do the following. Use <Box component="img" sx={{ }} /> instead. This supports the sx prop, thus your image will be customizable with sx prop.

The color prop does not support all MUI theme colors / their shades DIRECTLY through its color prop. Eg. The color prop supports primary but not primary.main/dark. It does not support the palette warning color at all.

To remedy this you have 2 options 1 BETTER -- give the icon the desired color through the sx prop OR 2. wrap the icon in a box and give the box to desired color

Cannot wrap your head around the arguments that this function takes ? read this first. https://firebase.google.com/docs/firestore/data-model

read the "References part" from this article

This might seem confusing at first glance. However this is just simple "nested destructruing" and "smart function parameters" used together

Read the "Nested Destructuring" and "Smart Function Parameters" sections from the link below to get a better idea of what's going on.

https://javascript.info/destructuring-assignment#object-destructuring

the set() function can also be written as -----

let set = (name) => {
    return ( (e) => {
        setDetails( {...details , [ name ] : e.target.value });
        console.log(details);
    })
}

notice how the predeclared variable name is being used as a key in the object. { [name] : value } NOT { name : value}. Skipping the box brackets will throw you an error This is because name is actually a variable. Similar to the way in which we use object[key] = value; notation to add a k-v pair, we have to use { [name] : value } ie. enclose the variable name in square brackets while creating an object using object literal syntax to make sure that the code works