Con su requisito, debe guardar la columna y la fila seleccionadas que están relacionadas.

Puede ver mi código a continuación, guardé la columna y la fila relacionadas en el estado de verificación, después de eso, solo modifique una pequeña condición en el componente List para mostrar la clase bg-danger . Además, eliminé la función onClick en el componente div , un padre del componente List , porque creo que es inútil hacer varias llamadas a funciones a la vez para la misma acción onClick

Aplicación.js

 import "./styles.css"; import List from "./List"; import { useState, useRef } from "react"; export default function App() { const [check, setCheck] = useState({}); const [columnId, setColumnId] = useState(null); const refColumnId = useRef(columnId) refColumnId.current = columnId; const data = [ { id: 1, listOfNumbers: [1, 2, 3, 4, 5, 6] }, { id: 2, listOfNumbers: [1, 2, 3, 4, 5, 6] }, { id: 3, listOfNumbers: [1, 2, 3, 4, 5, 6] } ]; const handleIndex = (column, row) => { setCheck({...check, [column]: row}) }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div className="row"> {data.map((data, index) => { return ( <div className="col-md-4"> <List columnId={columnId} key={data.id} data={data.listOfNumbers} getIndex={handleIndex} check={check} id={data.id} /> ; </div> ); })} </div> </div> ); }

lista.js

 const List = ({ data, getIndex, check, id, columnId }) => { const handleCardClick = (column, row) => { console.log("columnId : ", columnId); console.log("id : ", check); getIndex(column, row); }; return ( <div className="d-flex flex-column"> {data.map((number, index) => { return ( <div className="card"> <div className={`card-body ${ check.hasOwnProperty(id) && index === check[id] ? "bg-danger" : "" }`} onClick={() => handleCardClick(id, index)} > <h3>{number}</h3> </div> </div> ); })} </div> ); }; export default List;