Getting selected value in Material-UI Autocomplete

Question

Here's the link for the sandbox code: Problem

Here's my problem: I can't retrieve the values in my autocomplete component just like my other components. If you click the Retrieve data button, it will retrieve the value for creator, title, description, project, severity, and status but the members field is empty. I think the problem is at my Autocomplete component (line 95), am I doing it right?

Note: I remade the code so that I can share it on codesandbox, in my original code I'm using redux (but I'm pretty sure that the problem is not there but in the Autocomplete component)

Answer 1

Do it this way

     <Autocomplete
        multiple
        style={{ margin: "10px" }}
        limitTags={1}
        options={sampleUsers}
        getOptionLabel={(option) => option.name}
        fullWidth
        onChange={(e, newMember) =>
          setBugData({ ...bugData, members: newMember })      //return new member
        }

it works codesandbox

Answer 2

1. Use object instead of string in retrievedBugData: {name: "Minnie Mouse"}

---

const retrievedBugData = {
  creator: "Mickey Mouse",
  title: "A title",
  description: "A Description",
  project: "Project",
  members: [{name: "Minnie Mouse"}, {name: "Donald Duck"}],
  severity: "High",
  status: "Pending"
};

---

2. Set value of autocomplete to: value={bugData.members}

---

<Autocomplete
    multiple
    style={{ margin: "10px" }}
    limitTags={1}
    value={bugData.members}
    options={sampleUsers}
    getOptionLabel={(option) => option.name}
    fullWidth
    )}
/>

---

3. Use object inside on change event https://codesandbox.io/s/brave-pare-4w60h?file=/src/App.js