javascriptreactjsmaterial-uimui-autocomplete

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)


Solution

    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