¿Cómo puedo agregar y eliminar objetos de la matriz al marcar y desmarcar las casillas de verificación personalizadas? y un activador/marcador para marcar si está marcado o no..!!
función al hacer clic
const handleFilterValues = (meta_name, meta_value) => { const entry = { name: meta_name, value: meta_value }; var data = [...dataArray]; data.push(entry); setDataArray(data); } [0: {name: "meta_browser", value: "chrome"} 1: {name: "meta_browser", value: "firefox"}]Primero verifique si el meta_value está presente en la matriz y si lo está, elimínelo. De lo contrario, puede agregarlo en la forma en que está actualmente.
const handleFilterValues = (meta_name, meta_value) => { const index = dataArray.findIndex(({value}) => value === meta_value); const data = [...dataArray]; if (index > -1) { data.splice(index, 1); } else { const entry = { name: meta_name, value: meta_value }; data.push(entry); } setDataArray(data); }Con respecto a la actualización del estado de visualización de las casillas de verificación. Idealmente, el componente React solo responderá a la actualización realizada en el estado dataArray. Algo como:
const list = ['chrome', 'firefox'] const Checkboxes = () => { const [dataArray, setDataArray] = useState([]) return (<> {list.map((browserName) => ( <label>{browserName}<input type="checkbox" checked={dataArray.some(({value}) => value === browserName)} /></label> )} </>) }