value wont render on the cell

src/App.js

@@ -1,6 +1,8 @@
 import React, { useState, useReducer } from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 
+import Number from './components/assets/numBtn'
+
 // General utilities ---------------------------------------------
 import history from './utils/history';
 import { GridContext } from './store/contexts/GridContext';
@@ -51,7 +53,6 @@ const App = () => {
     original: '',
     history: [],
     conflicts: new Set([]),
-    numbers: [],
   });
 
   let grid = `${gridState.gridlength}x${gridState.gridlength}`;
@@ -112,6 +113,8 @@ const App = () => {
                       />
                     )}
                   />
+
+                  {/* <Number /> */}
                   <Route
                     exact
                     path='/'

src/components/SudokuGame/puzzle-builder/Board.js

@@ -3,15 +3,20 @@ import { GridContext } from '../../../store/contexts/GridContext';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from './Grid';
 
+import KeyButton from '../../assets/KeyButton';
+import NumberButton from '../../assets/numBtn';
+import KeyPadBoard from '../puzzle-builder/KeyPad/KeyPadBoard'
+
+
 const Board = (props) => {
   const classes = useStyles();
   const [gridState, setGridState] = useContext(GridContext);
 
-  console.log(gridState, ('Lord Grid'))
   console.log('BOARD PROPS: ', props);
   console.log('AKAKFILES: ', props);
 
   const handleSquareValueChange = (i, j, newValue) => {
+    console.log(i, j, newValue, 'bigbang')
     props.onSquareValueChange(i, j, newValue);
   };
 
@@ -22,7 +27,6 @@ const Board = (props) => {
     const board = [];
 
     for (let i = 0; i < boardState.length; i++) {
-      console.log(boardState.length, 'length length')
       let currRow = [];
       for (let j = 0; j < boardState[i].length; j++) {
         const conflicts = props.conflicts;
@@ -39,6 +43,14 @@ const Board = (props) => {
             colIndex={j}
             onValueChange={handleSquareValueChange}
           />
+          {console.log(boardState)}
+          <KeyButton 
+            rowIndex={i}
+            colIndex={j}
+            onValueChange={handleSquareValueChange}
+          />
+
+
 
           </div>
         );
@@ -56,9 +68,8 @@ const Board = (props) => {
   };
 
   const board = generateBoard();
-  console.log(board)
 
-  return <div className={classes.board} >{board}</div>;
+  return <div className={classes.board}> {board}  </div>;
 };
 
 const useStyles = makeStyles(() => ({

src/components/SudokuGame/puzzle-builder/Grid.js

@@ -3,13 +3,16 @@ import { GridContext } from '../../../store/contexts/GridContext';
 import styled from 'styled-components';
 import { blue } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
+
 import KeyButton from '../../assets/KeyButton'
+
+
 function Grid(props) {
-  console.log(props, 'gridddd')
   const classes = useStyles();
 
   const [gridState, setGridState] = useContext(GridContext);
 
+  console.log(props.editable, 'myvalue')
 
   const generateSquareContent = () => {
     // A Square may only be edited if it's value is "."
@@ -46,9 +49,6 @@ function Grid(props) {
         style['background'] = 'pink';
       }
     }
-
-
-
 
     return (
       <div className={classes.grid}>
@@ -63,8 +63,13 @@ function Grid(props) {
         />
 
         <KeyButton 
-        change={handleSquareValueChange}/>
+        value={squareValue} 
+        change={handleSquareValueChange}
+        rowIndex={props.rowIndex}
+        colIndex={props.colIndex}
+         />
 
+        {/* <KeyPadBoard onValueChange={onClickChange} /> */}
 
       </div>
     );
@@ -80,6 +85,8 @@ function Grid(props) {
     }
   };
 
+
+
   // Cell validation
   const isValidInput = (i) => {
     return i === '' || (i.length === 1 && isNumeric(i));
@@ -91,7 +98,7 @@ function Grid(props) {
 
 
 const isNumeric = (num) => {
-  return !isNaN(num);
+  return -!isNaN(num);
 };
 
 

src/components/SudokuGame/puzzle-builder/KeyPad/KeyPad.js

@@ -9,9 +9,11 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { blue, grey } from '@material-ui/core/colors';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import KeyPadBoard from './KeyPadBoard';
+import NumberButton from '../../../assets/numBtn'
 
 const KeyPad = (props) => {
   const [gridState, setGridState] = useContext(GridContext);
+  console.log(props, '1`')
 
   let gridNotChanged = 0;
   let gridChanged = 1;
@@ -31,6 +33,7 @@ const KeyPad = (props) => {
         </Box>
         <Box className={classes.Items}>
           <KeyPadBoard />
+          {/* <NumberButton /> */}
         </Box>
 
         <Box className={classes.Items}>

src/components/SudokuGame/puzzle-builder/KeyPad/KeyPadBoard.js

@@ -5,36 +5,47 @@ import Typography from '@material-ui/core/Typography';
 import { grey } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
 
-import Key from '../../../assets/KeyButton';
+import KeyPad from './KeyPad'
+import NumberButton from '../../../assets/numBtn';
+import KeyButton from '../../../assets/KeyButton'
 
-const KeyPadBoard = () => {
+const KeyPadBoard = (props) => {
+  console.log(props.onValueChange, 'propss')
   const classes = useStyles();
   const [gridState, setGridState] = useContext(GridContext);
 
   const GridLength = gridState.gridlength;
 
-  const generateBoard = () => {
+  const generateBoard = (props) => {
     const board = [];
 
     for (let i = 0; i < GridLength; i++) {
       let currRow = [];
       for (let j = 0; j < GridLength[i]; j++) {
+        let keys = j + 1
         let currSquare = (
-          <Box item xs={1} className={classes.squareItem}>
-            <Typography variant='body2'>{j + 1}</Typography>
+          <Box item xs={1} className={classes.squareItem} onClick={(e) =>console.log(keys)} >
+            <Typography variant='body2' >{keys}</Typography>
           </Box>
         );
         currRow.push(currSquare);
       }
-      board.push(<div className={classes.boardRow}>{currRow}</div>);
+      board.push(<div className={classes.boardRow} >{currRow}</div>);
     }
 
     return board;
   };
 
   const board = generateBoard();
 
-  return <Key className={classes.board} board={board} />;
+  return (
+    <div>
+
+      <KeyButton board={classes.boardRow} board={board} />
+  <NumberButton className={classes.board} class={classes} board={board}  />
+    </div>
+
+  );
 };
 
 const useStyles = makeStyles(() => ({

src/components/SudokuGame/puzzle-handler/RenderPuzzle.js

@@ -4,6 +4,9 @@ import { GridContext } from '../../../store/contexts/GridContext';
 import { PuzzleContext } from '../../../store/contexts/PuzzleContext';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
+
+import NumberButton from '../../assets/numBtn'
+
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
@@ -13,13 +16,16 @@ import Board from '../puzzle-builder/Board';
 import KeyPad from '../puzzle-builder/KeyPad/KeyPad';
 // key value rendering:
 import KeyButton from '../../assets/KeyButton';
-import Length from '../../KeyPad/keypad/lengthKey';
+import KeyPadBoard from '../puzzle-builder/KeyPad/KeyPadBoard'
+
 import { keysPuzzle } from './functions/keys';
 
 import { Get4x4 } from './grid-axios-call/4x4';
 import { Get6x6 } from './grid-axios-call/6x6';
 import { Get9x9 } from './grid-axios-call/9x9';
 
+
+
 // Authentication
 import axiosWithAuth from '../../../utils/axiosWithAuth';
 import { postWithAuth } from '../Upload-image/postWithAuth';
@@ -130,7 +136,7 @@ const RenderPuzzle = (props) => {
         cellId: stringify(i, j),
         editable: prevEditable,
       };
-      console.log('newBoardState: ', prevState.newBoardState);
+      console.log('newBoardState: ', prevEditable);
 
       // Now push the previous board state on the history stack
       const newHistory = getDeepCopyOfArray(prevState.history);
@@ -332,7 +338,14 @@ const RenderPuzzle = (props) => {
                     onNewGameClick={handleNewGameClick}
                     onVerifyClick={handleVerifyClick}
                     onSaveClick={handleSaveClick}
+
                   />
+
+
+
+                  <KeyButton valueChange={handleSquareValueChange}
+                  />
+
                 </Grid>
               </Grid>
             );

src/components/assets/KeyButton.js

@@ -1,18 +1,38 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { GridContext } from '../../store/contexts/GridContext' 
+import Numbers from './numBtn'
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
 
 function Keys (props) {
-    console.log(props.change, 'onClick props')
+    console.log(props, 'data')
 
+    const handleClick = (i, j, newValue) => {
+        console.log(i, j, newValue, 'BIGbANG')
+        // props.valueChange(i, j, newValue)
 
-    return (
-        <h1 
-        value={props.board}
-        onClick={() => {props.change(props.board)}}>
-            {props.board}
+    }
+
+    const handleChange = () => {
+        const target = props.data
+        if((target)) {
+            const row = props.rowIndex;
+            const col = props.colIndex;
+            handleClick(row, col, target)
 
-        </h1>
+        }
+    }
+
+    return (
+        <div className={props.boardRow}>
+            <Typography className={props.boardRow} variant='body2' onClick= {() =>
+                handleChange(console.log(props.data, 'valen'))
+            }>
+                 {props.data}
+            </Typography>
+        </div>
     )
 }
 
-export default Keys
+export default Keys;