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

Possible duplicate of [event.target is undefined in events](https://stackoverflow.com/questions/30342873/event-target-is-undefined-in-events) — Praveen Kumar Purushothaman, May 05 '19 at 15:09
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, May 05 '19 at 15:24
@PraveenKumarPurushothaman this is not duplicate. please read question. it's abount select-react. — BIS Tech, May 05 '19 at 17:25
@BloodLoss I strongly feel this might be possible dupe. But yea, if you are so confident, I'll take your words. It would be great to give us a [mcve] in CodeSandbox.io or something. — Praveen Kumar Purushothaman, May 05 '19 at 19:14

score 10 · Accepted Answer · answered May 05 '19 at 17:06

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 05 '19 at 17:06

Rallen

2,240
20
22

not working, I changed like this, ```dataChange(ev, action) { this.setState({ [action.name]: ev // [value.target.name]: value.target.value }); }``` – BIS Tech May 05 '19 at 17:18
I am very beginning to reactJS – BIS Tech May 05 '19 at 17:23
I edited my question. When a change to your solution, ` – BIS Tech May 05 '19 at 17:31

score 2 · Answer 2 · answered May 11 '21 at 05:45

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>);
  }

score 0 · Answer 3 · answered Nov 17 '21 at 21:11

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}
/>

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

3 Answers3

Linked

Related