TypeError: event.target on React Select input control

Question

Trying to change state on Change using a React Select node module package, if its a regular text input it works but can't quite get this to work, returns "TypeError: event.target is undefined".

Only putting in the code that matters, not full page.


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "15",
      options: [
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" },
        { label: "Sup", value: "18" }
      ]
    };

    this.stateChange = this.stateChange.bind(this);
  }

  stateChange = event => {
    console.log(event.target.value);
    // this.setState({ value: event.target.value });
  };

  render() {
    const Home = () => {
      return (
        <Provider store={store}>
              <div className="categories">

                <Select
                  options={this.state.options}
                  onChange={this.stateChange}
                />

              </div>

A couple things: 1) What arguments does Select's onChange prop actually take? It might not be an event as you're expecting. 2) If you're defining stateChange as an arrow function. you don't need to bind it to this in the constructor. That actually does nothing due to how arrow functions are scoped. — Nick
– Nick, Commented Oct 21, 2019 at 1:28
I'm still trying to figure that event thing out with Select, and stateChange was being used differently but I changed it to this function to test this out. — CalebN99
– CalebN99, Commented Oct 21, 2019 at 1:32

Nick · Accepted Answer · 2019-10-21 01:31:20Z

2

If you're using the react-select library, it looks like the Select component's onChange prop will actually just give you the selected item rather than an event:

stateChange = selectedOption => {
  console.log(selectedOption);
  this.setState({ value: selectedOption });
};

answered Oct 21, 2019 at 1:31

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

Comments

thortsx · Accepted Answer · 2019-10-21 01:31:29Z

1

Try this:

stateChange = selectedOption => {
    console.log(`Option selected:`, selectedOption);
    this.setState({ value: selectedOption });
    // with React-Select, selectedOption is a value of option, not an event
};

answered Oct 21, 2019 at 1:31

thortsx

2,2802 gold badges15 silver badges32 bronze badges

Comments

Code Maniac · Accepted Answer · 2019-10-21 01:33:04Z

1

React select onChange gives you the value directly, instead of the event, so you can simply use,

stateChange = value => {
  console.log(value);
  this.setState({ value: value });
};

React select docs

answered Oct 21, 2019 at 1:33

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

TypeError: event.target on React Select input control

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related