Reactjs onClick <MenuItem> passing INT instead of STRING

user_8609844 0
Viewed 86

Below given code is using material-ui with reactjs. I am filtering the information of products through this sidebar function. In which there are 2 filers size and color. When we click on Expansion Panel, options will displayed and than we click on desired option (which is not returning the selected color). On the other hand same Expansion Panel is returning the correct selected "size". What i can do so that onClick={colorReducer} function return correct color. Any help will be appreciated

const Sidebar = () => {

  const [size, setSize] = React.useState(0);
  const [color, setColor] = React.useState("");


  const sizeReducer = (e) => {
    setSize(e.target.value);          //This is working fine
  };

  const colorReducer = (e) => {
    console.log(color);               //It gives 0 as output, instead of selected color (type string)
    setColor(e.target.value);
  };

  return (
    <div className={classes.div}>
     
      <ExpansionPanel>
        <ExpansionPanelSummary>
          <InputLabel id="label">Size</InputLabel>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <ListItem>
            <MenuItem value="6" onClick={sizeReducer}>
              6
            </MenuItem>
            <MenuItem value="7" onClick={sizeReducer}>
              7
            </MenuItem>
            <MenuItem value="8" onClick={sizeReducer}>
              8
            </MenuItem>
            <MenuItem value="9" onClick={sizeReducer}>
              9
            </MenuItem>
          </ListItem>
        </ExpansionPanelDetails>
      </ExpansionPanel>

      <ExpansionPanel>
        <ExpansionPanelSummary>
          <InputLabel id="label">Color</InputLabel>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <ListItem>
        {setColors.map((val) => (
          <MenuItem value={val} onClick={colorReducer}>    //This is not returning "0", instead of color
            {val}
          </MenuItem>
        ))}
      </ListItem>
        </ExpansionPanelDetails>
      </ExpansionPanel>

    </div>
  );
};

export default Sidebar;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

react-redux material-ui reactjs html javascript
2 Answers

<MenuItem> renders to <li> element. Interestingly, value is an allowed attribute for li but it can only take numbers. That's why it works for setSize but doesn't for setColor.

A proper way to do what you want is not to relegate to DOM but stay in React-land. So, instead of reading from event.target, you should provide value in a handler:

<MenuItem onClick={() => setColor(val)}>
    {val}
</MenuItem>
user_56644340 
{setColors.map((val) => (
          <MenuItem value={val.toString()} onClick={colorReducer}>
            {val}
          </MenuItem>
    ))}

Update this part, you've passed int value in above mentioned part of code.

user_132560250
Related