React-Select: "Cannot read property 'replace' of undefined" when I type in the Select

Question

I am implementing React-Select Async. According to their documentation, my code is correct. Yet, onInputChange throws the error "Cannot read property 'replace' of undefined"each as soon as I type something. How to fix this?

const options=[
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]
export default function App() {
const [query, setQuery] = useState('')
  const handleInputChange = (str) => {
    const inputValue = str.replace(/\W/g, '');
    setQuery(inputValue);
    return inputValue;
  };
  return (
    <>
     <AsyncSelect
          cacheOptions
          //loadOptions={loadOptions}
          defaultOptions={options}
          onInputChange={(e)=> handleInputChange(e.target.value)}
        />
    </>
  );
}

Yousaf · Accepted Answer · 2020-06-18 09:28:13Z

1

when onInputChange event is fired, handleInputChange function is passed the input value by react-select. So yo don't need to pass the value manually.

So change

onInputChange={(e)=> handleInputChange(e.target.value)}

to

onInputChange={handleInputChange}

Also you need to set isAsync prop to true

edited Jun 18, 2020 at 9:28

answered Jun 18, 2020 at 8:34

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HelloWorldEngineer Over a year ago

It's a typo in my question, but there's no such error in my code. The issue persists. If I write onChange of their onInputChange, I don't have error anymore, but the filter doesn't work.

HelloWorldEngineer Over a year ago

Sure: codesandbox.io/s/goofy-margulis-xlnzj?file=/src/App.js & the official exemple for async select: react-select.com/home#async

GameAintTheSame · Accepted Answer · 2020-06-18 08:34:46Z

0

onInputChange={(e)=> handleInputChange(ee.target.value)} . You put 'ee.target...' instead of 'e.target...'

answered Jun 18, 2020 at 8:34

GameAintTheSame

441 silver badge5 bronze badges

1 Comment

HelloWorldEngineer Over a year ago

It's a typo in my question, but there's no such error in my code. The issue persists.

Collectives™ on Stack Overflow

React-Select: "Cannot read property 'replace' of undefined" when I type in the Select

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related