How do i reference document in react typescript?

Question

I wanna do this in one of my conditional functions, but it's completely erroring out. Even if I assign it to a variable it says "cannot find namespace 'document'"

document.getElementById("dropdown").selectedIndex = "1";

And when I put that in my function it says Object is possibly null, so how do I reference this in a react tsx file?

I have a select statement that I need to dynamically select the default value based on some conditions. If those conditions are true, then it will run this document selector to select the index of the specified value. I just need to find a way to run a function that selects the default value of this select statement though, that's my goal

<Select
    value={action}
    variant="outlined"
    classes={{ select: classes.selectOutlined }}
    id="dropdown"
    displayEmpty
    inputProps={{ 'aria-label': 'Action' }}
    onChange={(event) => handleActionChange(event.target.value as string)}
  >
    <MenuItem value="Action" disabled>
      Choose an Action
    </MenuItem>
    {actions.map((action) => {
      return <MenuItem key={action.text} value={action.text}>{action.text}</MenuItem>
    })}
  </Select>

And then this is the function that creates those menu items, as well as the conditionals to set the default value:

const actions = useMemo(() => {
  let allActions: Array<{ text: string, value: string }> = [
    { text: 'Notify SME for Review', value: 'sme' },
    { text: 'Return for Review', value: 'review' },
    { text: 'Notify Sales for Review', value: 'notify' },
    { text: 'Release to Agent', value: 'release' }
  ];

  if (groups.includes('SME')) {
    allActions = [{ text: 'Notify Sales for Review', value: 'notify' }, { text: 'Return for Review', value: 'review' },]
  } else if (groups.includes('IT')) {
    allActions = [{ text: 'Notify SME for Review', value: 'sme' },]
  } else if (groups.includes('Sales')) {
    allActions = [{ text: 'Release to Agent', value: 'release' }]
  }

  // This will select the second item in the select element when it's IT or Sales
  if (groups.includes('IT') || groups.includes('Sales')) {
    const dropdown = document.getElementById('dropdown')!.selectedIndex = "1";
  }

  return allActions;
}, [groups]);

Answer 1

The problem you're facing is solved by understanding React unidirectional data flow. Your source of truth should come from above, always.

In more concrete words, you wouldn't read or write directly to your #select element, but instead you'd have an state value for it, which would be your source of truth:

const MyComponent = ({ groups }) => {
  const [selectedIndex, setSelectedIndex] = useState(0)  // or the default value

  /**
   * In here, you'll let react know that you want some code to run, when
   * this property changes in the outside world
   */
  useEffect(() => {
    if (groups.includes('IT') || groups.includes('Sales')) {
      setSelectedIndex(1)
    }
  }, [groups]);

  // ...

  return (
    <Select
      value={selectedIndex}
      ....other props...
    >
       ... children
    </Select>
  )
}

Basically, you don't use document.getElementId.