Why is the state not updated in the child component?

Question

JavaScript

Hello! I need the borders to be highlighted in blue when clicking on a table cell, like in google sheets. I have shared the code. Each cell in the row is rendered by a child component. But when the stateClick state is updated in it, re-rendering does not occur, and the selection from the cell is not removed.

import React, {useEffect, useState} from 'react'
import TableCell from './Components/TableCell.js'

export default function OperationTable() {

    const [dataCell, setDataCell] = useState([
            {
                FirstName: 'Ivan',
                SurName: 'Ivanov',
                Age: 22,
                Car: 'Mazda 3'
            },
            {
                FirstName: 'Semen',
                SurName: 'Semenov',
                Age: 22,
                Car: 'Ford Focus 3'
            }
        ]
    )

    return (
        <div className="operationTable">
            <table>
                <thead>
                <tr>
                    <WidthColumns
                        classNameHeader="FirstName"
                        NameHeader="FirstName"
                        classNameDiv="resizer"
                        id="FirstName"
                    />
                    <WidthColumns
                        classNameHeader="SurName"
                        NameHeader="SurName"
                        classNameDiv="resizer"
                        id="SurName"
                    />
                    <WidthColumns
                        classNameHeader="Age"
                        NameHeader="Age"
                        classNameDiv="resizer"
                        id="Age"
                    />
                    <WidthColumns
                        classNameHeader="Car"
                        NameHeader="Car"
                        classNameDiv="resizer"
                        id="Car"
                    />
                </tr>
                </thead>
                <tbody>
                {dataCell.map((item, index) => (
                    <tr key={index}>
                        <TableCell index={index} name="FirstName" state={dataCell}/>
                        <TableCell index={index} name="SurName" state={dataCell}/>
                        <TableCell index={index} name="Age" state={dataCell}/>
                        <TableCell index={index} name="Car" state={dataCell}/>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    )
}

import React, {useEffect, useState} from 'react'

const TableCell = ({index, name, state}) => {

  const [dataTable, setDataTable] = useState(state)

  //--------------------------------------------------------------------------

  let copyDataTable = JSON.parse(JSON.stringify(dataTable))
  let initialClickData = copyDataTable.map(item => {
    for (let el in item) {
      item[el] = false
    }
    return item
  })

  const [stateClick, setStateClick] = useState(initialClickData)

  //--------------------------------------------------------------------------

  const handleClick = (index, name) => (
    () => {
      console.log(initialClickData[index][name])
      initialClickData[index][name] = !initialClickData[index][name]
      console.log(initialClickData[index][name])
      setStateClick(initialClickData)
    }
  )

  useEffect(() => {
    console.log(stateClick)
  }, [stateClick])

  return (
    <>
      <td
        name={name}
        onClick={handleClick(index, name)}
        style={stateClick[index][name] ? {
          outline: '2px solid blue',
          outlineOffset: '-1px',
          position: 'relative'
        } : {border: '1px solid #c7c7c7'}}
      >
        <div className={name + "Cell"}>
          {dataTable[index][name]}
        </div>
        <span className={name}> </span>
      </td>
    </>
  )
}

export default TableCell

Answer 1

You select the cell you click on, but the state of the previous selected cell does not change.
1. Bad option. Notify the parent that a cell is selected and the way it stores the state of which cell/row is selected.

// передавайте обработчик onClick ребенку и в него же передавайте статус ячейки
const TableCell = ({index, name, state, onClick}) => {...}

2. Good option. Instead of this. it is better to implement onClick at the level of the parent table, and not to hang an event handler on each cell, this is terribly suboptimal.