save responses and validate nulls

src/Components/Test/Cleaver/Question.jsx

@@ -30,8 +30,8 @@ function CheckboxesGroup(props) {
 
   let { quiz, save, responses : resp, id:index} = props;
 
-  const [checkA, setCheckA] = React.useState( 0);
-  const [checkB, setCheckB] = React.useState(0);
+  const [checkA, setCheckA] = React.useState(resp[index]? resp[index].A : 0);
+  const [checkB, setCheckB] = React.useState(resp[index]? resp[index].B : 0);
 
   const changeA = (event) => {
     let { id, checked } = event.target
@@ -40,10 +40,12 @@ function CheckboxesGroup(props) {
       let temp = {
         [index]: {
           A:id,
-          B: resp[id]?.B ? resp[id].B : 0
+          B: resp[index] ? resp[index].B : 0
         }
       }
-      save(Object.assign(resp,temp))
+      let final = Object.assign(resp,temp);
+      console.log('Change A:',final)
+      save(final)
     }
   };
   
@@ -54,10 +56,12 @@ function CheckboxesGroup(props) {
       let temp = {
         [index]: {
           B:id,
-          A: resp[id]?.A ? resp[id].A : 0
+          A: resp[index] ? resp[index].A : 0
         }
       }
-      save(Object.assign(resp,temp))
+      let final = Object.assign(resp,temp)
+      console.log('Change B: ', final);
+      save(final)
     }
   };
 
@@ -124,7 +128,7 @@ export function Question({quiz, index, current, save, responses}) {
         <CardContent>
           <div variant="body2">
             <List>
-              <CheckboxexHeader group={index + 1} title={instrucciondepregunta}/>
+              <CheckboxexHeader group={id} title={instrucciondepregunta}/>
             </List>
             <CheckboxesGroup 
               id={id}

src/Pages/Pruebas/Cleaver.jsx

@@ -3,6 +3,7 @@ import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
 import { Question } from '../../Components/Test/Cleaver/Question.jsx'
 import { Box,Button } from '@mui/material'
+import toast, { Toaster } from 'react-hot-toast';
 
 export function Cleaver() {
 
@@ -14,6 +15,9 @@ export function Cleaver() {
   const [current, setCurrent] = React.useState(0);
   const [responses, setRespones] = React.useState({});
 
+  const BadQuestion = () => toast("Escoge una respuesta en cada columna",{
+      icon : '⚠️'
+  });
 
   React.useEffect(() => {
     // TODO:
@@ -29,7 +33,17 @@ export function Cleaver() {
   }, [token]);
 
   const handleAddQuestion = () => {
+
     let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
+    let current_resp = responses[currentAnswer.id];
+
+    if(!current_resp){
+      return BadQuestion();
+    }
+    console.log(current_resp)
+    if(parseInt( current_resp.A ) ===0 || parseInt( current_resp.B ) === 0){
+      return BadQuestion();
+    }
     const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
     if (nextHiddenItem) {
       setPreguntas(nextHiddenItem);
@@ -85,6 +99,9 @@ export function Cleaver() {
           Siguiente
         </Button>
       </div>
+      <Toaster
+        position="top-center"
+        />
     </div>
   )