smooth question render

src/App.css

@@ -308,5 +308,5 @@
 }
 
 .checkbox_label_question{
-  font-weight:bold;
+  font-weight:bold !important;
 }

src/Components/Test/Cleaver/Question.jsx

@@ -10,6 +10,7 @@ import Checkbox from '@mui/material/Checkbox';
 // import { deepPurple } from '@mui/material/colors';
 
 import List from '@mui/material/List';
+import Tooltip from '@mui/material/Tooltip';
 import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -42,9 +43,9 @@ function CheckboxesGroup(props) {
   const [checked, setChecked] = React.useState([0]);
 
   const handleToggle = (value) => () => {
+
     const currentIndex = checked.indexOf(value);
     const newChecked = [...checked];
-
     if (currentIndex === -1) {
       newChecked.push(value);
     } else {
@@ -61,7 +62,11 @@ function CheckboxesGroup(props) {
         return (
           <ListItem key={value.id}>
             <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
-              <ListItemText className="checkbox_label_question" id={labelId} primary={value.nombre} />
+
+              <Tooltip title={value.decription} placement="top-start" arrow>
+                <ListItemText className="checkbox_label_question" id={labelId} primary={value.nombre} />
+              </Tooltip>
+
               <ListItemIcon>
                 <Checkbox
                   edge="start"
@@ -74,7 +79,7 @@ function CheckboxesGroup(props) {
               <ListItemIcon>
                 <Checkbox
                   edge="start"
-                  checked={false}
+                  //checked={}
                   tabIndex={-1}
                   disableRipple
                   inputProps={{ 'aria-labelledby': labelId }}
@@ -89,8 +94,8 @@ function CheckboxesGroup(props) {
 }
 
 export function Question({ quiz }) {
-  console.log('quiz: ', quiz)
-  let { instrucciondepregunta,respuestas } = quiz
+  // console.log('quiz: ', quiz)
+  let { instrucciondepregunta, respuestas} = quiz
   return (
 
     <Card sx={{ minWidth: 275, margin: 5 , borderLeft: '5px solid var(--main)'}}>

src/Pages/Pruebas/Cleaver.jsx

@@ -1,29 +1,84 @@
-import React, { useMemo} from 'react'
+import React, { useMemo, useRef } from 'react'
 
 import { Service } from '../../Utils/HTTP'
 import useAuth from '../../Auth/useAuth.js';
-import {Question} from '../../Components/Test/Cleaver/Question.jsx'
+import { Question } from '../../Components/Test/Cleaver/Question.jsx'
 
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import { TransitionGroup } from 'react-transition-group';
 
 export function Cleaver() {
 
   let auth = useAuth();
   let token = useMemo(() => auth.getToken(), [auth])
 
-  const [questions, setQuestions] = React.useState([]);
+  const [totalRespondidas, setRespondidas] = React.useState([]);
+  const [totalPreguntas, setPreguntas] = React.useState([]);
+
+
   React.useEffect(() => {
     let rest = new Service(`/prueba/findid/1`)
     rest.get(token.toString())
-      .then(({data}) => { 
-        setQuestions(data.questions.slice(0,3))
-      })
-      .catch( e => console.log("ERROR: ", e))
+      .then(({ data }) => {
+        console.log(data.questions)
+        setPreguntas(data.questions)
+        setRespondidas(data.questions.slice(0,1))
+      }).catch(console.log)
   }, [token]);
 
+  const handleAddQuestion = () => {
+    let currentAnswer  = totalRespondidas[totalRespondidas.length - 1];
+    const nextHiddenItem = totalPreguntas.filter(({id}) => id !== currentAnswer.id );
+    if (nextHiddenItem) {
+      setPreguntas(nextHiddenItem);
+      let temp = nextHiddenItem.shift()
+      setRespondidas([...totalRespondidas,temp]);
+      console.log('RESPONDIDAS: ', totalRespondidas)
+      scrollToBottom();
+    }
+  };
+  
+  let last = useRef(null)
+
+const scrollToBottom = () => {
+    if(last.current){
+      last.current.scrollIntoView()
+    }
+  }
+
+  // useEffect(() => {
+    // scrollToBottom()
+  // }, [totalRespondidas]);
+
   return (
-    <div className="content-section">
+
+    <div  className="content-section">
       <div className="main">
-        { questions.map( (e,i) => (<Question key={i} quiz={e}/>) ) }
+        <Box sx={{ mt: 1 }}>
+          <List >
+            <TransitionGroup >
+              {totalRespondidas.map((item) => (
+                <Collapse key={item.id} >
+                  <Question key={item.id} quiz={item} />
+                </Collapse>
+              ))
+            }
+            </TransitionGroup>
+          </List>
+        </Box>
+
+      <Button
+        ref={last}
+        variant="contained"
+        disabled={totalRespondidas.length >= totalPreguntas.length}
+        onClick={handleAddQuestion}
+      >
+        Add Question
+      </Button>
+
       </div>
     </div>
   )