Okta SDE2 frontend machine coding question

We are going to solve an Okta SDE2 frontend machine coding question.

We have to create a small React application that generates grid with incremental values, whose value changes differently on click.

The problem statement reads as:

• Accept an number N as input and generate a grid of N * N size.
• The grid functions with following logic.
  • On clicking an empty cell fill it with max(existingNumbers) + 1.
  • On clicking a non-empty cell update it with max(existingNumbers).

Following are the expectations while coding this in React:

• Well-structured and modular React components.
• Optimal state management.
• Efficient computation of the maximum value.
• Clean UI and minimal re-rendering.
• Bonus for explanations and performance considerations.

Keeping the expectations in mind and taking the problem statement into consideration let us try to code this in React.

We are going to follow the container-presentation pattern of React, where we will create clear separation of concern of the components.

• We will first create a parent component that will generate the input element and a generate button to take the size of the grid as input and render the grid.
• Then we will have the grid component that will generate N*N size of grid.
• And finally the grid cell component that will hold its logic of updating the value when clicked.

Taking grid size as input with the generate button

We are creating a controlled component, that will generate the grids on the click of the button to avoid unwanted re-rendering.

import { useState } from "react"; export const Solution = () => { const [gridSize, setGridSize] = useState(0); const [renderGrid, setRenderGrid] = useState(false); const onChangeHandler = (e) => { setRenderGrid(false); const { value } = e.target; setGridSize(Number(value)); }; return ( <div> <input type="number" onChange={onChangeHandler} value={gridSize} /> <button onClick={() => { setRenderGrid(true); }} > Render </button> <br /> {renderGrid && <Grid size={gridSize} />} </div> ); }; 

When the value of the input is changed, we reset the rendering and the grid will be rendered again on the button click. This provides fine-grained control over the rendering behavior.

Generating the grid

Next we are going to do the simple iterations to generate the grid of the size N * N.

We are making use of a variable to track the count so that we can label the grid cells properly and update them on the click based on the problem statement.

const Grid = ({ size }) => { const generateGrid = () => { const gridArray = []; let count = 1; for (let i = 0; i < size; i++) { let row = []; for (let j = 0; j < size; j++) { row.push(<GridInner count={count} />); count++; } gridArray.push(<div>{row}</div>); } return gridArray; }; return <div className="grid-wrapper">{generateGrid()}</div>; }; 

Using the class .grid-wrapper we will style the grid to generate them in zig-zag pattern.

.grid-wrapper { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column; } .grid-wrapper > div { display: inline-flex; gap: 10px; } .grid-wrapper > div:nth-child(even) { flex-direction: row-reverse; } .grid-wrapper > div > div { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid; cursor: pointer; } .grid-wrapper > div > div.active { background-color: green; } 

We will need the GridInner component to generate the grid and also initially they will be empty, the above image is only to represent that the grid is generated.

On the click of the grid cell we will update it based on the requirements in the problem statement.

• On clicking an empty cell fill it with max(existingNumbers) + 1.
• On clicking a non-empty cell update it with max(existingNumbers).

const GridInner = ({ count }) => { const [empty, setEmpty] = useState(true); const [val, setVal] = useState(count); return ( <div onClick={() => { setVal(empty ? count + 1 : count); setEmpty(false); }} > {empty ? "" : val} </div> ); }; 

Conclusion

The key highlight of this question was handling the click event on grid cell and rendering them properly.