when using {react-select} Cannot read property 'name' of undefined

Question

I am very beginning to reactJS and front end

I added react-select npm for my dropdown like below, before added react-select everything is working fine. How to define name in Select?

<div className="container">
            <div className="row">
              <div className="col-md-4" />
              <div className="col-md-4">
                <Select
                  options={this.state.allGenres}
                  onChange={this.props.onDataChange}
                  name="genre"
                />
              </div>
              <div className="col-md-4" />
            </div>
          </div>

this is my array,

 var Data = response.data;
    const map = Data.map((arrElement, index) => ({
      label: arrElement,
      value: index
    }));

example:

[
    {
        "label": "Action",
        "value": 0
    },
    {
        "label": "Comedy",
        "value": 1
    },
    {
        "label": "Documentary",
        "value": 2
    }
]

error message coming in here,

   dataChange(ev, action) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

render()

 render() {
    return (
      <Movie
        onPostData={this.postData.bind(this)}
        onDataChange={this.dataChange.bind(this)}
      />
    );
  }

Error

Uncaught TypeError: Cannot read property 'name' of undefined at Movies.dataChange

React Select's documentation isn't that great, but it passes the new value to the onChange function as its first parameter. You don't have to pick it from the event. — JJJ
– JJJ, Commented May 5, 2019 at 15:24

user6612182 · Accepted Answer · 2019-05-05 17:06:07Z

10

You expect the first argument in react-select´s onChange method to be an event object, but it isn't.

The first argument is the selected option (or options if you have isMulti set). There is also a second argument which is an object with the following attributes:

action: The action which triggered the change
name: The name given to the Select component using the name prop.

So if you want to use the name:

onDataChange={(value, action) => {
    this.setState({
        [action.name]: value
    })
}}

Reference in source code

answered May 5, 2019 at 17:06

user6612182

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

3 Comments

BIS Tech Over a year ago

not working, I changed like this,

dataChange(ev, action) {     this.setState({       [action.name]: ev       //  [value.target.name]: value.target.value     });   }

BIS Tech Over a year ago

I am very beginning to reactJS

BIS Tech Over a year ago

I edited my question. When a change to your solution, <input also coming the same error

Arashdeep Singh · Accepted Answer · 2021-05-11 05:45:13Z

2

I worked around this method and it worked.

handleSelectChange: function(name) {
    return function(newValue) {
        // perform change on this.state for name and newValue
    }.bind(this);
  },

render: function() {
   return (
      <div>
        <Select ...attrs...  onChange={this.handleSelectChange('first')} />
        <Select ...attrs...  onChange={this.handleSelectChange('second')} />
      </div>);
  }

answered May 11, 2021 at 5:45

Arashdeep Singh

3203 silver badges9 bronze badges

Comments

Amr · Accepted Answer · 2021-11-17 21:11:06Z

This is how you can get the value(s) of the selected option(s) and the name of the input as well.

For more info, check this issue on Github.


handleChange = (selectedOptions, actionMeta) => {
    const inputName = actionMeta.name;
    let selectedValues;

    if (Array.isArray(selectedOptions)) {
        // An array containing values of the selected options (like: ["one", "two", "three"]
        selectedValues = selectedOptions.map(option => option.value);

        // OR, use this if you want the values of the selected options as a string separated by comma (like: "one,two,three")
        selectedValues = selectedOptions.map(option => option.value).join(",");

    } else {
        // An array containing the selected option (like: ["one"])
        selectedValues = [selectedOptions.value];

        // OR, use this if you want the value of the selected option as a string (like: "one")
        selectedValues = selectedOptions.value;
    }

    // Do whatever you want with the selected values
    //..
    this.setState({
        [inputName]: selectedValues
    });
}

<Select
    name="genre"
    options={this.state.allGenres}
    onChange={this.handleChange}
/>

Collectives™ on Stack Overflow

when using {react-select} Cannot read property 'name' of undefined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related