Question 285938 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React MUI 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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'
                  />


  2. 0

    Dig into the MUI Autocomplete docs and you will find examples, play with them and combine them and you will get code like this codesandbox

    Basically, set up your state. Mutate as needed. Then when you are ready grab those values and send them to your API as needed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search