How to preact signal to build a drop-down list?

Question

This is my first to use preact/signals. I am not sure if is it a good practice for using preact/signals.

Would you tell me how can I use the signals for building the drop-down box?

Here is my code:

import './App.css';
import Select from 'react-select/async';
import { signal } from "@preact/signals-react";
import {useEffect} from "react";
import fetchAPI from "./utility/fetchAPI.js";

let technicianObjList=signal(null);  
export default function App() {  
  const toSelectOption = ({ id, name, jobtitle }) => ({ label: name + ' ' + ((jobtitle) ? jobtitle : ''), value:{id:id,jobtitle :jobtitle ,name:name}});
  
  useEffect(()=>{
    let getData=async()=>{
      let searchResult = await fetchAPI(...........);
      technicianObjList.value=searchResult.map(toSelectOption);
    }
    getData();
  },[]); 
  return (
    <div className="App">
       <Select
          isClearable
          options={technicianObjList.value}/>
          {(technicianObjList==null)?technicianObjList.value.length:""}
    </div>
  );
}

I got the following error message:

Cannot read properties of undefined (reading '__H')
TypeError: Cannot read properties of undefined (reading '__H')
    at d (http://localhost:3000/static/js/bundle.js:9410:13)
    at p (http://localhost:3000/static/js/bundle.js:9458:11)
    at App (http://localhost:3000/main.4d729e3bd3aede4ff93c.hot-update.js:49:59)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:23738:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:27024:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:28320:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13330:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13374:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13431:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:33305:11)

The fetcAPI function is working properly, and the variable searchResult contains all the data to build the drop-down box. Unfortunately, the result is the drop-down box contains no options.

How can I populate the API data to the select box?

Answer 1

Responding to your last comment:

I follow rschristian instruction to modify the code, and the error message is gone, but the drop-down box is still empty.

Probably, React isn't listening for updates of your signals' values yet. As is stated in a relatively hidden part of the docs, you either need to add some Babel plugin to make React listen for updates of signals' values or, alternatively, you can use the useSignals() hook inside those components that you want to react to signal-value-updates.