Things I learned today

<Typography variant=”caption”>

Photography <HelpOutlineIcon style={{ position: ‘relative’, top: ‘8px’ }} />

</Typography>

This is one way to get an image and text to line up. Both position and top are important. Top will apply from the top of this line allowing the image to line up correctly. Position relative is also important to help lining things as the images will attempt to more or less stay in line relative to the the line it is in. This can also be done in the following way.

<InputLabel onClick={()=>console.log(‘clickerty clack’)} shrink={true} >Promo Type <AdminQuestionMark thisName={‘promo_type_cn’} /></InputLabel>

Documentation - Utility Types

This talks about record which is useful for having one object have the same keys as another object

export const questionsIconInfoMainPageHtml: Record<keyof fullDataOfEachPromotion, JSX.Element> = {

JSX.Element also is the property of the key in this case.

Create JavaScript strings with this JavaScript resources.

\’ is what you use to escape out of a quote system to get add certain things that are difficult to add to a string.

https://stackoverflow.com/questions/41308123/map-typescript-enum

(Object.keys(MyEnum) as Array<keyof typeof MyEnum>).map((key) => {})

mapping an enum can be done like so. Can be useful to get the keys

export default function SimpleDialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(emails[1]);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    setOpen(false);
    setSelectedValue(value);
  };

  return (
    <div>
      <Typography variant="subtitle1">Selected: {selectedValue}</Typography>
      <br />
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open simple dialog
      </Button>
      <SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
    </div>
  );
}

Label position for Material-UI text field with icon adornment when shrink false

This one details for text fields