React, wrapped menuItem component doesn't trigger the onChange function of the select parent component

Viewed 239

I'm trying to add property to a material ui component (menuItem) by wrapping it into an other. I called it menuItemValued. The code of the new component looks like that:

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
//import { MenuItem as MaterialList } from '@material-ui/core/MenuItem';
import { connect } from 'react-redux';


class MenuItemValued extends React.Component {

    constructor(props) {
        super(props);
        this.props = props;
        //console.log(props);
        this.value = this.props.value;
        this.state = {

        };

    }


    render() {
        return (
            <MenuItem value={this.props.value}  onClick={this.props.changeGear}>{this.props.string}</MenuItem>
        );
    }

}

const mapStateToProps = (state, props) => {
  //console.log(props);
  return{
    outils : state.materielList

  }
}

const mapDispachToProps = (dispach, ownprops) => {
  console.log(ownprops);
  return{
    changeGear: () => dispach({type:'CHANGE', tool: ownprops.valeur})
    //changeGear: () => dispach({type:'CHANGE'})
  }
}

export default connect(mapStateToProps, mapDispachToProps) (MenuItemValued);

The problem is, when I put this component as a child of a select component, it doesn't trigger the onChange when I click on it as the other regular menuItem does. Here is an example with a select who as in child a regular menuItem working and a custom menuItem not working:

<Select
                labelId="demo-controlled-open-select-label"
                id="demo-controlled-open-select"
                open={this.state.isOpen}
                onClose={this.props.changeGear}
                onOpen={this.handleOpen}
                value={this.state.property}
                onChange={this.handleChange}
                >

                <MenuItemValued value={100} valeur={109} onChange={() => this.handleClose()} string={"Taille 9"}/>
                <MenuItem value={110}>Taille 10</MenuItem>


                </Select>

I don't understand what I missed to get the new component working.

0 Answers
Related