Checkboxes not checking in React drop down menu?

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= 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/

Checkboxes not unchecking in React drop down menu?

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 shows up, and then when I click on it again, it does not disappear..

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= 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 not show when I check click on them after clicking on them once? 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/

How to change the text color for an unchecked row in xaml

I would like to gray out the text associated to an unchecked row in my application using xaml. I tried the following, but it is getting overwritten:

               <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox Name="cbkSelect" 
                           IsChecked="{Binding Path=IsSelectedForOrder, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                            <CheckBox.Style>
                                <Style TargetType="{x:Type CheckBox}">
                                    <Setter Property="Visibility" Value="Hidden"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsChecked" Value="False">
                                            <Setter Property="Foreground" Value="Gray"/>
                                        </Trigger>
                                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </CheckBox.Style>
                        </CheckBox>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>

Working with multiple checkbox and hooks on React

I have a multiple checkbox modal that filters a list to show the user, so when i click on one of the checkbox and submit it, the list is filtered to show only the results that match the state that was chosen; this is working just fine, but for some reason when i filter and go back to the modal to choose another option, i don't have that previous one selected (which i should) and also i need to uncheck every selection so i can show the original list (without any filtering) again.

This is my results array:

messages=[
{id:1, description:'abc', status:'SENT'},
{id:2, description:'hello', status:'CANCELLED'},
{id:1, description:'bye', status:'SENT'}];

This is my states array:

const states = [
    {
      id: 1,
      label: "SENT",
      class: "checkbox",
    },
    { id: 2, label: "CANCELLED", class: "checkbox" },
    { id: 3, label: "EMITING", class: "checkbox" },
    {
      id: 4,
      label: "NULLED",
      class: "checkbox",
    },
    
  ];

This is my checkbox component:

const filterOptions = states.map((option) => (
    <div key={option.label} className="mb-3">
      <Form.Check
        type={option.class}
        id={option.id}
        name={option.label}
        label={option.label}
        onChange={filterState}
      />
    </div>
  ));

This is my filterState function:

let items = [];
  const filterState = (event) => {
    const target = event.target;
    const value = target.name;

    if (target.checked) {
      items.push(value);
    } else {
      items.splice(value, 1);
    }
  };

The items array now has only the labels of the checkbox that are checked so i can use it to filter the results on Submit:

const onSubmit = () => {
    event.preventDefault();
    event.stopPropagation();
    let search = filterMessagesByStatus(items);
    if (search.length > 0) {
      setData(search);
      setIsActive(true);
      setEmptySearch(false);
    } else {
      setIsActive(false);
      setEmptySearch(true);
    }

    setModalShowFilters(false);
  };

Now i don't know why is not saving the checkbox that i choose before, and also i don't know what is the best way to return the list to it's original state (without filtering, unchecking everything).

Can anyone help me with this?

Hide checkbox until mouseover and make it stay once checked WPF

The checkbox is invisible until I mouse over which is what I want, but now I want it to stay visible once it is checked. I've tried implementing a multi trigger, but it doesn't seem to be working:

<DataGridTemplateColumn.CellTemplate>
   <DataTemplate>
      <CheckBox Name="cbkSelect" 
                IsChecked="{Binding Path=IsSelectedForOrder, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
         <CheckBox.Style>
            <Style TargetType="{x:Type CheckBox}">
               <Setter Property="Visibility" Value="Hidden"/>
               <Style.Triggers>
                  <MultiDataTrigger>
                     <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True"></Condition>
                        <Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="True"></Condition>
                     </MultiDataTrigger.Conditions>
                     <MultiDataTrigger.Setters>
                        <Setter Property="Visibility" Value="Visible"/>
                     </MultiDataTrigger.Setters>
                  </MultiDataTrigger>
               </Style.Triggers>
            </Style>
         </CheckBox.Style>
      </CheckBox>
   </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

Android Spinner With Checkbox

I am trying to implement a custom spinner with 5 items with checkboxes, basically, the custom layout for the dropdown item has a checkbox and a textView for the title. I noticed that the onItemSelected Listener stops firing and I cannot select any individual item, it does not register that I have selected a particular item even if I click the checkbox. Is there a workaround for this so that when I check any checkbox it registers that the item has been selected

class CustomAdapter(
    context: Context,
    resource: Int,
    private val colorsList: List<ColorStateVO>
) :
    ArrayAdapter<ColorStateVO?>(context, resource, daysList) {
    private var getPosition: Int = 0
    override fun getDropDownView(
        position: Int, convertView: View?,
        parent: ViewGroup?
    ): View? {
        return getCustomView(position.plus(1), convertView, parent)
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = createViewFromResource(convertView, parent, layout.spinner_item)
        val textView = view.findViewById<TextView>(id.spinnerText)
        textView.text = coloursList[position].title
        return view
    }

    private fun createViewFromResource(
        convertView: View?,
        parent: ViewGroup,
        layoutResource: Int
    ): View {
        val context = parent.context
        return convertView ?: LayoutInflater.from(context).inflate(layoutResource, parent, false)
    }

    override fun getCount(): Int = daysList.size - 1
    private fun getCustomView(
        position: Int, convertView: View?,
        parent: ViewGroup?
    ): View {
        var holder = ViewHolder()
        val view: View
        if (convertView == null) {
            view =
                LayoutInflater.from(context).inflate(layout.spinner_checkbox_item, parent, false)

            holder.colorTitleTextView = view.findViewById(id.checkbox_text)
            holder.colorCheckBox = view.findViewById(id.spinnerCheckbox)
            view.tag = holder
        } else {
            holder = convertView.tag as ViewHolder
            view = convertView
        }
        holder.colorTitleTextView?.text = colorsList[position].title

        holder.colorCheckBox?.isChecked = colorsList[position].selected

        holder.colorCheckBox?.tag = position
        holder.colorCheckBox?.setOnCheckedChangeListener { buttonView, isChecked ->
   
            colorsList[position].selected = isChecked
            if(isChecked) {
               //Do something
            }
        }
        holder.colorTitleTextView?.setOnClickListener {
            holder.colorCheckBox?.toggle()
        }
        return view
    }

    override fun getPosition(item: ColorStateVO?): Int {
        return super.getPosition(item)
    }

    inner class ViewHolder {
        var colorTitleTextView: TextView? = null
        var colorCheckBox: CheckBox? = null
    }
}

data class ColorStateVO(val title: String, var selected: Boolean)```

Checkbox inside React Accordion does not work in IE Spring Boot Application

I am working on Spring Boot application in which I am using React accordion. I have Checkbox (input type="checkbox") inside title of this accordion. This checkbox works in Chrome, Firefox, Microsoft Edge but it does not work in Internet explorer. In IE Accordion click event always takes precedence and checkbox never works.

<Accordion>
  {this.state.someSelection.map(iSelection =>
  <AccordionItem
       title={
         <div>
           <MyCheckBox t={t} module={iModule} selected={iSelection.selected} onSelect={this.onSelectSomething}/>
         </div>}
       key={iSelection.name}
     >
       < Some more divs />
       
     </AccordionItem>)
   }
</Accordion>

Thanks in advance. Manmath.