CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
dvbngln
dvbngln

Reputation: 411

Getting selected value in Material-UI Autocomplete

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)

Upvotes: 1

Views: 2856

Answers (2)

Akif Hadziabdic
Akif Hadziabdic

Reputation: 2890

  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"
};
  1. 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
    )}
/>
  1. Use object inside on change event https://codesandbox.io/s/brave-pare-4w60h?file=/src/App.js

Upvotes: 0

Yoel
Yoel

Reputation: 7965

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

Upvotes: 1

Related Questions