Get the "ID" of the selected value with material-ui autocomplete

Question

I'm using the autocomplete component with material-ui.

1. The data in "customerList" in the search field is no problem. But I can't get the "ID" number of the data I selected. I want to get the ID number of the selected data.

2. Also, an error like below appears. How can I fix this?

import Autocomplete from '@material-ui/lab/Autocomplete';


class AppointmentFormContainerBasic extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {

    const textEditorProps = (field) => ({
      variant: 'outlined',
      onChange: ({ target: change }) => this.changeAppointment({
        field: [field], changes: change.value
      }),
      value: displayAppointmentData[field] || '',
      className: classes.textField
    });

    const customerList = [
      {id: "1", customerName: 'John', customerSurname: "test0"},
      {id: "2", customerName: 'Bob', customerSurname: "test1"},
      {id: "3", customerNametle: 'steve', customerSurname: "test2"},
      {id: "4", customerName: 'steve', customerSurname: "test3"},
      {id: "4", customerName: 'natalia', customerSurname: "test4"}
    ];

    return (
      <AppointmentForm.Overlay
        visible={visible}
        target={target}
        fullSize
        onHide={onHide}>
        <div>
          <div className={classes.content}>
            <div className={classes.wrapper}>
              <Create className={classes.icon} color="action" />
              <Autocomplete
                id="free-solo-demo"
                freeSolo
                options={customerList.map( (option) => {
                  if (top100Films.customerName === undefined) {
                    console.log("undefined")
                  } else {
                    console.log("option.customerName")
                  }
                  return option.customerName + " " + option.customerSurname;
                })}

                
                defaultValue={displayAppointmentData['customerName']}
                onInputChange={(event, newInputValue) => {
                  this.changeAppointment({
                    field: ['customerName'], changes: newInputValue,
                    value: displayAppointmentData[newInputValue] || '',
                  });
                }}

              />
            </div>

        </div>
      </AppointmentForm.Overlay>
    );
  }
}

Answer 1

EDIT As you can see from the following sample the newValue param of onChange method returns an object.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      onChange={(event, newValue) => {
        console.log(JSON.stringify(newValue, null, ' '));
      }}
    />
  );
}

const top100Films = [
  { id: 0, title: "The Shawshank Redemption", year: 1994 },
  { id: 1, title: "The Godfather", year: 1972 },
  { id: 2, title: "The Godfather: Part II", year: 1974 },
  { id: 3, title: "The Dark Knight", year: 2008 },
  { id: 4, title: "12 Angry Men", year: 1957 }
];

Unfortunately your code is just a fragment and it hard to determine why it does not work in your case.