Returning value from React child component

I am beginner in React so I apologize if this is a basic question. I am trying to build an online Sudoku grid using ReactJS but I am unable to render the digits in the field. I have made two components one being the Sudoku.js which renders the complete sudoku block and other being Node.js which consists of an input field wrapped inside a div. the functionality I want is to change the default value of the input field (which is “” in my case) whenever the user types a number. I have tried the below approach. It updates the value of my grid variable but does not show the updated value in the input field of Node. Kindly help.

Sudoku.js

const sudokugrid = (
    <div>
        {grid.map((row,rowIdx) => {
            return (
                <div key = {rowIdx} className="rowWrapper">
                    {row.map((col,colIdx) => {
                        var element = grid[rowIdx][colIdx].value;
                        
                        const change = (event) => {
                            element = event.target.value;
                            grid[rowIdx][colIdx].value = element;
                                                      
                            setGrid(grid);
                            return element;
                        }

                        return (
                            <Node
                                key = {colIdx}
                                onChangeValue = {change}
                                value = {element}
                            />
                        )
                    })}
                </div>
            )
        })}
    </div>
);

here grid is a 2D array of 9×9 elements which have initial value of all the elements being “” , which are supposed to be updated when the user types in the value in the respective fields. the problem is that the value is updated when the user types the number but the number is not shown in the input field

The Node component is as follows:

function Node(props){
return (
    <div className="box">
        <input 
            className = "num" 
            type="number" 
            value = {props.value}
            onChange = {props.onChangeValue}
        />
    </div>
)

}

Answer

This is because react can’t detect mutations. See this article. You have to store the sudoku grid in a state value and change the state with a callback function. An example. I suggest using an object map for storing the state because you can manage the values a lot easier.

Advertisement

Answer