How to take out value from sematnic search and assign to value to var?

Question

How can I take the value of the and move it into the Value var?

I cant take the search out of this code without recreating the whole webpage, if there is another way of adding the value of the search bar into the workOrderStore.loadWorkOrders then please let me know :)

Thank you in advance

    var Value = ""
    
    
    enter code here
    
    //<AllGrid workorders={workOrderStore.workorders} />
    
    const WorkOrderDashboard: React.FC<IProps> = props => {
      const workOrderStore = useContext(oneOrderStore);
      const userAuthStore = useContext(UserAuthStore);
    
      let sessionObj = JSON.parse(sessionStorage.getItem("sessionObj")!)
      let IsLoggedIn = sessionStorage.getItem("isLoggedIn")
      let CurrentModule = sessionStorage.getItem("module")
      
      useEffect(() => {
        userAuthStore.HydrateAuthState();
       }, [userAuthStore]);
    
      function searchJobs(){
          window.alert(Value)
          workOrderStore.loadWorkOrders(CurrentModule!,sessionObj.Username,sessionObj.Client.Id,Value);
      
        if (workOrderStore.loadinginitial)
          return <LoadingComponent content={"Loading: " + CurrentModule} inverted={true} />;
      
      };
    
    
    
    
      return(
      <Fragment>
        <br></br>
      <div>
      
       <Search 
       value={""}
       open={false}
       onBlur={searchJobs}
       type='text'
       />

Answer 1

usestate hook is probably what you're looking for. I don't use semantic-ui so here is an example with a html input:

function App() {
    const [search, setsearch] = useState("");
  
    function handleSearchChange(event) {
      setsearch(event.target.value);
    }
  
    return (
      <div>
        <input value={search} type="text" onChange={handleSearchChange} />
      </div>
    );
}

I took a look at the semantic-ui documentation, and it looks like it's working like that:

function App() {
    const [search, setsearch] = useState("");
  
    function handleSearchChange(event, data) {
      setsearch(data.value);
    }
  
    return (
      <div>
          <Search
            onSearchChange={handleSearchChange}
            value={search}
          />
      </div>
    );
}