Estoy construyendo un sitio web de visualizador de algoritmos de búsqueda.

El orden de los componentes es App->Row->Box

Cada componente del cuadro tiene su propia identificación única (rowNumber-colNumber) y tiene su nombre de clase establecido como "No visitado"

Tengo un evento onclick en el componente de la aplicación que ejecuta BFS

Para visualizar Bfs, tengo que acceder y cambiar el nombre de clase de algunos componentes de Box específicos (según su identificación) a "Visitado"

¿Cómo puedo lograrlo?

Estos son mis componentes

 //APP COMPONENT import React from "react" import Row from "./Row" export const Start = {row:14,col: 18},End = {row:14,col: 35} export default function App(){ const [grid,setGrid] = React.useState([]) React.useEffect(() => { for(let i = 1;i<29;i++){ setGrid(prevArray =>prevArray.concat(<Row key = {i} row = {i}/>)) } },[]) return ( <> <div className = "Navbar"> <a href ="#" onClick = {Bfs}>Breadth First Search</a> </div> {grid} </> ) }

 //ROW COMPONENT import React from "react" import Box from "./Box" import {Start,End} from "./App" export default function Row(props){ const row = []; for(let colNumber = 1;colNumber<54;colNumber++){ row.push(<Box key = {colNumber} row = {props.row} col = {colNumber} isStart = {props.row == Start.row && colNumber == Start.col} isEnd = {props.row == End.row && colNumber == End.col} />) } return ( <div className ="row"> {row} </div> ) }

 //BOX COMPONENT import React from "react"; export default function Box({ row, col, isStart, isEnd }) { return ( <div className="Unvisited" id={`${row}-${col}`}> {isStart && <img src="./images/start.png"></img>} {isEnd && <img src="./images/target.png"></img>} </div> ) }