aquí probé muchas formas de obtener los valores de las casillas de verificación generadas dinámicamente en react js pero fallé, ayúdame a resolver estos problemas ... estoy teniendo problemas como
"Uncaught TypeError: Cannot set properties of undefined" or anyone of the states like "{Name: "Module2",View:false,Create:false,Edit:false,Delete:false}",los valores deben actualizarse en el propio handlechange.
const DynamicCB = ()=>{ const modules = ["Module1", "Module2","Module3"] const [state,setState] = useState([{ Name:'', View:false, Create:false, Edit:false, Delete:false }]) const handlechange = (name ,i) =>event=>{ console.log(name) const Data=[...state] if(Data.includes(event.target.name)){ Data[i][name] = event.target.checked setState(state,Data) }else{ Data[i].Name = event.target.name Data[i][name] = event.target.checked setState(state,Data); } return(<> <div className="container"> <div className="row"> <h2>Modules</h2> </div> { modules.map((item,i)=>( <div className="row" key={i}> <div className="col-sm"> <h4>{item}</h4> </div> <div className="col"> <input type="checkbox" name={item} className="m-2" onChange={handlechange('View',i)}/>View <input type="checkbox" name={item} className="m-2" onChange={handlechange('Create',i)}/>Create <input type="checkbox" name={item} className="m-2" onChange={handlechange('Edit',i)}/>Edit <input type="checkbox" name={item} className="m-2" onChange={handlechange('Delete',i)}/>Delete </div> </div> )) } </div> </>) }en mi intento, muestra cualquiera de los siguientes conjuntos de objetos o muestra un error como "No se pueden establecer propiedades de indefinido (configurando 'Nombre')". Necesito los valores de estado como a continuación
[ { Name: "Module1",View:true,Create:false,Edit:false,Delete:false}, { Name: "Module2",View:false,Create:false,Edit:false,Delete:false}, { Name: "Module3",View:false,Create:true,Edit:true,Delete:false} ]Puede inicializar el state (usando la devolución de llamada useState ) y actualizar el estado de cada módulo usando moduleName y el nombre de la operación ("Ver", "Editar", "Crear", "Eliminar") como se muestra a continuación.
const modules = ["Module1", "Module2", "Module3"]; const [state, setState] = useState(() => modules.map((module) => { return { Name: module, View: false, Create: false, Edit: false, Delete: false }; }) ); const handlechange = (name, i) => (event) => { const moduleName = event.target.name; const actionName = name; setState((prev) => { return prev.map((module) => { if (module.Name === moduleName) { return { ...module, [actionName]: event.target.checked }; } return module; }); }); };