How to change the checked property in a checkbox?-CodePudding

I have a state called ListItems and I wish to display them as checked if the value is present in another state array called filteredListItems. I have created a callback function but this doesn't seem to work. How do I go on about this?

import React, {useState, useRef} from 'react'
import { connect, useDispatch, useSelector, useStore} from 'react-redux';

import { setEnable} from "../actions";
import './Settings.css'

function Settings(props){
  
  const dispatch=useDispatch();

  const [listItems,setListItems]=useState(props.defaultenableVal);
  const [filteredListItems,setFilteredListItems]=useState(props.defaultenableVal);

  const dragItem = React.useRef();
  const dragOverItem = React.useRef();
  
  const handleSort=()=>{
    let _listItems=[...listItems];

    const draggedItemContent=_listItems.splice(dragItem.current,1)[0];

    _listItems.splice(dragOverItem.current,0, draggedItemContent);

    dragItem.current=null;
    dragOverItem.current=null;
    
    setListItems(_listItems);
  }

  return(
      <div className='container'>
        <h3>Dimensions and Metrics</h3>
          {
            listItems.map((item,index)=>{
              return (
                <div 
                  key={index} 
                  draggable 
                  onDragStart={(e)=>dragItem.current=index}
                  onDragEnter={(e)=>dragOverItem.current=index}
                  onDragEnd={handleSort}
                  onDragOver={(e)=>e.preventDefault()} >
                  <input id={index} name={item} type='checkbox' 
                  checked={(()=>{
                    if(filteredListItems.includes(item)){
                      return true
                    }
                    else{
                      return false
                    }
                   })}  />
                  <label htmlFor={index} >{item}</label> 
                </div>
              )
            })
          } 
    </div>
  ) 
        }
export default Settings;

The value of props.defaultEnableVal is ['Clicks', 'AD Requests', 'AD Responses', 'Impressions', 'Revenue', 'Fill Rate', 'CTR']. The check does not appear on the checkbox and it doesn't seem to be accepting check input when I click on it.

CodePudding user response：

There are a few things you can try to troubleshoot this issue.

First, make sure that you are passing the correct values for listItems and filteredListItems. These values should be arrays of strings, and they should contain the same elements that you want to display as checkboxes in your component.

Next, check the callback function that you are using to determine whether a checkbox should be checked. In your code, you are using an arrow function as the checked prop for the input element, but this function does not have a return statement. Instead of using an arrow function, you can try using a regular function that returns a boolean value. Here is an example of how you could rewrite this part of your code:

function isChecked(item) {
  return filteredListItems.includes(item);
}

// ...

<input id={index} name={item} type='checkbox' checked={isChecked(item)} />

Finally, make sure that you are correctly binding the onChange event to the input element. This event should be used to update the filteredListItems state whenever a checkbox is checked or unchecked. Here is an example of how you could do this:

function handleChange(e) {
  const { value } = e.target;
  if (e.target.checked) {
    setFilteredListItems([...filteredListItems, value]);
  } else {
    setFilteredListItems(filteredListItems.filter((item) => item !== value));
  }
}

// ...

<input id={index} name={item} type='checkbox' checked={isChecked(item)} onChange={handleChange} />