How to use onChange in react-select

Question

I am trying to create onChange function in my react-select. Here is my following code:

  const find = (event) => {
    event.preventDefault();
    if (event.target.value === "Users") {
      setSearchUsers(true);
      setSearchTeams(false);
    } else if (event.target.value === "Teams") {
      setSearchUsers(false);
      setSearchTeams(true);
    }
  };

  <Select
    className="search-select"
    instanceId="long-value-select"
    closeMenuOnSelect={false}
    components={animatedComponents}
    defaultValue="Select"
    isMulti
    onChange={(e) => find(e.target.value)}
    options={searchData}
  />

When I try to change options it's giving me this error

TypeError: event.preventDefault is not a function

How can I use onChange function in this case?

Abdullah Ch · Accepted Answer · 2021-08-15 09:52:04Z

8

You are passing the event.target.value into the find method and then using that event value to get the event.target.value again. You do not need to do this again as you already passed the value. The prevenDefault() method does not exist on the event's value but it exists on the event object itself. Just pass the event object as the argument to use the preventDefault().

 onChange={(e) => find(e)}

edited Aug 15, 2021 at 9:52

answered Aug 15, 2021 at 9:46

Abdullah Ch

2,2032 gold badges18 silver badges40 bronze badges

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

1 Comment

kta Over a year ago

onChange={find} will automatically pass the event to function.

Viet · Accepted Answer · 2021-08-15 09:43:10Z

4

Just update onChange like this:

onChange={(e) => find(e)}

or shorter:

onChange={find}

answered Aug 15, 2021 at 9:43

Viet

12.9k2 gold badges18 silver badges23 bronze badges

4 Comments

Nhan Nguyen Over a year ago

still getting the error TypeError: event.preventDefault is not a function

Andy Over a year ago

What are you using preventDefault for? Is it to stop a form from submitting?

Viet Over a year ago

onChange in react-select return a value not an event so you cannot use event.preventDefault

Nhan Nguyen Over a year ago

I see. Thanks for pointed out the mistake for me. So how do I change my onChange function to make it work with react-select? When I selected an option and I console.log(value) it's giving me this 0: label: "Users", value: "Users"

Andy · Accepted Answer · 2021-08-15 09:50:16Z

2

This handler only passes the value of the event to find, not the event, and the value doesn't have a preventDefault method.

onChange={(e) => find(e.target.value)}

Pass the event to the function just using the handler...

onChange={find}

...and then have the function extract the value

function find(event) {
  event.preventDefault();
  const { value } = e.target;
  if (value === 'Users') {
    // ...
  }
}

answered Aug 15, 2021 at 9:50

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

sid · Accepted Answer · 2021-08-15 09:46:20Z

0

onChange={(e) => find(e.target.value)}

You're passing the selected value to the find function which is a value not an event therefore you get the error.

Changing it to onChange={find} will work smoothly because the default action is cancellable.

answered Aug 15, 2021 at 9:46

sid

2,09710 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to use onChange in react-select

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related