Multiple Customer Different Id's

React beginner here, English is not my mother language so sorry for mistakes, here I have an input, button and dropdown(select options), 'value' represents id and 'text' represents

Solution 1:

Ideally the autocomplete would allow you to set the display/value members separately, but I'm not very familiar with these components so instead I did a small refactor on this page to change the way you're handling the state of the autocomplete, but now it works like you want it to.

https://codesandbox.io/s/optimistic-bhaskara-m2vm2?file=/src/component.js

const [selectedOption, setSelectedOption] = useState({ value: "", text: "" });

<AutoComplete
        ref={autoControl}
        open={dropdownOpen}
        style={{ width: 200 }}
        placeholder="Search..."
        listHeight={220}
        onSearch={(e) => onSearch(e)}
        onChange={changeHandler}
        value={selectedOption.text}
        onFocus={onFocusChange}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.text}
          </Option>
        ))}

I also changed the change handler to include option as a parameter and am setting the selectedOption state based on that.

Solution 2:

Hey so in order to fix this I think all you need to do is set the Option component's value to the unique key in your list of options.

for example:

<Option key={option.value} value={option.value}>
  {option.text}
</Option>

The goal should be to have your autocomplete display option.text but set the value and state based on option.value.