Checkboxes not checking in React drop down menu?

user_13100551 0
Viewed 1533

I'm working on a dropdown menu in React.js which serves as a filter for some of the items of the page. The filter function works fine, but when I go to check one of the filters, the check does not show up.

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

function Filter() {  
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    const handleChange = (event) => {
        setState({ ...state, [event.target.name]: event.target.checked });
    };
    
    return(
    <div>
      <Button style={{color: "white"}} onClick={handleClick}>Filter</Button>
            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <div>
                    <MenuItem>
                        <label for="one"><input type="checkbox" id="one" name="filter" onChange={handleChange} value="opt1" /> Option1</label>
                    </MenuItem>
                </div>
                <div>
                    <MenuItem>
                        <label for="two"><input type="checkbox" id="two" name="filter" onChange={handleChange} value="Photography" className="medium" /> Photography</label>
                    </MenuItem>
                </div>
            </Menu>
        </div>
    )
}

Basically, I want the checks in the checkboxes to show when I click them. How do I get them to show? I checked to ensure that I'm using the correct conventions for checkboxes with the name and the div that you are supposed to use between them, but I wondering why it still won't show. I'm using components of the Material-UI library: https://material-ui.com/components/menus/

reactjs checkbox menu drop-down-menu javascript
2 Answers

because the input name is equal you have change the name how this:

<div>
    <MenuItem>
     <label for="one"><input type="checkbox" id="one" name="filter1" onChange={handleChange} value="opt1" /> Option1</label>
    </MenuItem>
</div>
<div>
    <MenuItem>
       <label for="two"><input type="checkbox" id="two" name="filter2" 
         onChange={handleChange} value="Photography" className="medium" /> 
         Photography</label>
    </MenuItem>
</div>
user_84024170

The main problem is with handleChange function - there is no setState in scope. For functional component you can control state with useState hook.

Also I would recommend you to use mui Checkbox component - since you will need only these 3 properties to control its state: name, checked and onChange. Here is an example, with your code:

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Checkbox from "@material-ui/core/Checkbox";

export default function Filter() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [filterState, setFilterState] = React.useState({
    filter1: false,
    filter2: false
  });

  const handleChange = (event) => {
    setFilterState({
      ...filterState,
      [event.target.name]: event.target.checked
    });
  };

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button onClick={handleClick}>Filter</Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <div>
          <MenuItem>
            <Checkbox
              name="filter1"
              checked={filterState.filter1}
              onChange={handleChange}
            />
          </MenuItem>
        </div>
        <div>
          <MenuItem>
            <Checkbox
              name="filter2"
              checked={filterState.filter2}
              onChange={handleChange}
            />
          </MenuItem>
        </div>
      </Menu>
    </div>
  );
}
user_38800190
Related