reactjstypescriptmaterial-uimui-autocomplete

React Material UI Autocomplete Store chosen Values


im new to React / Typescript. I just want to store the options that a user chose at the Autocomplete component. After that, i'd need to send the chosen values to an API. How do i do this?... Code:

       <Autocomplete multiple id="tags-roles" options={roles} 
                 getOptionLabel={(option) => option.title}
                 renderInput={(params) => (
                  <TextField
                  {...params}
                  variant='standard'
                  label="Choose Roles"
                  placeholder='Roles'
                  />

I already tried asking ChatGPT and seeing the Autocomplete doc on the MUI page but couldnt find anything


Solution

  • Allright i got the answere if others are looking for an answere in the future for this case:

     const handleRolesChange = (event: any, value: any) => {
        const uniqueRoles = value.filter((role: any, index: number, self: any[]) => self.findIndex((r) => r.value === role.value) === index);
        setRole(uniqueRoles);
      }
    <Autocomplete multiple id="tags-roles" options={roles} value={role} onChange={handleRolesChange}
                     getOptionLabel={(option) => option.title}
                     renderInput={(params) => (
                      <TextField
                      {...params}
                      variant='standard'
                      label="Choose Roles"
                      placeholder='Roles'
                      />