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.