added commented code for explanations in ResultantDfa

Author: anserwaseem

src/features/NfaToDfa.tsx

@@ -33,7 +33,6 @@ export const NfaToDfa = () => {
     isModifiedTransitionTableComplete,
     setIsModifiedTransitionTableComplete,
   ] = useState(false);
-  const [modifiedRows, setModifiedRows] = useState<RowModel[]>([]);
 
   const [isResultantDfaComplete, setIsResultantDfaComplete] = useState(false);
 
@@ -109,12 +108,11 @@ export const NfaToDfa = () => {
         ),
       };
     }),
-    setRows: setModifiedRows,
     setIsModifiedTransitionTableComplete: setIsModifiedTransitionTableComplete,
   };
 
   let resultantDfaProps: ResultantDfaProps = {
-    rows: modifiedRows.map((row) => {
+    rows: dataContext.modifiedTableRows.map((row) => {
       return {
         ...row,
         ...Object.fromEntries(
@@ -132,7 +130,6 @@ export const NfaToDfa = () => {
         ),
       };
     }),
-    modifiedTableRows: modifiedRows,
     setIsResultantDfaComplete: setIsResultantDfaComplete,
     playgroundSize: dataContext.playgroundSize,
     stateSize: dataContext.stateSize,

src/features/components/nfaToDfa/ModifiedTable.tsx

@@ -42,7 +42,7 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
 
   const dataContext = useContext(DataContext);
 
-  const [duration, setDuration] = useState(AnimationDurationOptions[3]);
+  const [duration, setDuration] = useState(AnimationDurationOptions[0]);
   const [isPlaying, setIsPlaying] = useState(false);
 
   const [isComplete, setIsComplete] = useState(false); // set to true when data is completely displayed
@@ -265,8 +265,8 @@ export const ModifiedTable = (props: ModifiedTableProps) => {
       const rowIndex = Math.floor(index / numberOfColumns);
       if (isComplete) {
         setIsReady(true);
-        props.setRows(modifiedTableRows);
         props.setIsModifiedTransitionTableComplete(true);
+        dataContext.setModifiedTableRows(modifiedTableRows);
       }
 
       handleUpdateData(rowIndex, props.rows.slice(0, rowIndex));