transcript_selector.tsx

function TranscriptSelector() {
  const [error, setError] = useState();
  const [transcripts, setTranscripts] = useState();
  const [selection, setSelection] = useState();
  useEffect(() => {
    async () => {
      try {
        const result = await loadTranscripts(); // imagine this just returned a list of strings
        setTranscripts(result);
        setSelection(result[0]); // set the initial selection to the first transcript
      } catch (e) {
        setError(e);
      }
    };
  });

  return error ? (
    <div style={{ color: "red" }}>{`${error}`!!!}</div>
  ) : (
    <TranscriptSelector2
      selection={selection}
      options={transcripts}
      onChange={sel => setSelection(sel)}
    />
  );
}

function TranscriptSelector2({ options, selection, onChange }) {
  return (
    <select
      value={mySelection}
      onChange={event => setMySelection(event.target.value)}
    >
      {opts.map(o => (
        <option key={o} value={o}>
          {o}
        </option>
      ))}
    </select>
  );
}