Onclick on select's MenuItem not working properly

Question

I have the following strange behavior

<Select style={{ width: "60%" }} value="none">
  <MenuItem onClick={e => this.handleSelectChange(e, null, "None")}>
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
        <div key={index}>
          <MenuItem
            onClick={e => this.handleSelectChange(e, index, Obj.Module)}
            value={Obj.Module}
          >
            {Obj.Module}
          </MenuItem>
        </div>
      );
    }
  })}
</Select>

 {this.state.selectedSubModules === true ? <React.Fragment>

   <InputLabel style={{ marginLeft: '15%', marginTop: '5%' }} htmlFor="age-simple">SubModule Name</InputLabel>
           <Select
            style={{ width: '60%' }}
           value="none" onChange={this.handleSelectChange}
            >
              <MenuItem
                 value="None"
              >
               <em>None</em>
              </MenuItem>

      {
        values.Modules_SubModules_Array.map((Obj, index) => {
                return (
                          <div key={index}>
              {Obj.SubModules.map((submodule, index2) => {
                             return (
                                      <MenuItem
                                            key={index2}
                                            value={submodule}
                                       >
                                            {submodule}
                                       </MenuItem>
                                               )
                                          })
                                        }
                            </React.Fragment>
                                    )
                                    })
                                }
                            </Select>
                        </div>
                            : null
                        }

this is my function :

handleSelectChange = (event, index, value) => {
  console.log(value);
  this.setState(
    {
      result: event.target.value,
      visible: true,
      selectedIndex: index
    },
    function() {
      index;
    }
  );
};

the Onclick inside the Map loop works fine but the one on the MenuItem outside the map loop does not fire didn't know what to do I tried to do some console logs it seems that it fires when I press on the select dropdown menu not when I select an item didn't know why this strange behavior the MenuItems inside the map loop works fine the onClick fires when I only pick an item from the dropdown list

Answer 1

You have to move the onChange to the Select component like this:

<Select style={{ width: "60%" }} value="none" onChange={this.handleSelectChange}>
  <MenuItem>
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
          // Remove the div wrapper
          <MenuItem
            key={index}
            value={Obj.Module}
          >
            {Obj.Module}
          </MenuItem>
      );
    }
  })}
</Select>

and access the value like this:

handleSelectChange = (event) => {
  this.setState({
      result: event.target.value,
      visible: true
    }
  );
};

To access the index, you can access the key with the second parameter of onChange like this:

handleSelectChange = (event, child) => {
  this.setState({
      result: event.target.value,
      visible: true,
      index: Number(child.key)
    }
  );
};

For the double map, you would need to use a reduce to remove the wrapping like this:

values.Modules_SubModules_Array.reduce((arr, obj, i) => {
    obj.SubModules.forEach((sub, k) => {
        arr.push(<MenuItem
            key={i * 100 + k}
            value={sub}>
            {sub}
        </MenuItem>);
    });
    return arr
}, [])

Hope this helps. Happy coding.

Answer 2

Usually, you define value for each MenuItem and use onSelect callback on Select component:

<Select onSelect={this.handleSelectChange}>
  <MenuItem value="none">
    <em>None</em>
  </MenuItem>

  {values.Modules_SubModules_Array.map((Obj, index) => {
    if (Obj.Module !== "") {
      return (
        <MenuItem key={index} value={Obj.Module}>
          {Obj.Module}
        </MenuItem>
      );
    }
  })}
</Select>

Note that your question lacks necessary information:

• MenuItem, Select implementation, is it a library component? Which library?

So according to your code, you can try adding a value to MenuItem "none":

const DEFAULT_VALUE = 'none';

<Select value={DEFAULT_VALUE}>
  <MenuItem onClick={e => this.handleSelectChange(e, null, DEFAULT_VALUE)} value={DEFAULT_VALUE}>
    <em>None</em>
  </MenuItem>
</Select>