I am building a Search Algorithm Visualizer website.

The order of components is App->Row->Box

Each box component has its own unique id (rowNumber-colNumber) and has its classname set as "Unvisited"

I have an onclick event in App Component which runs BFS

To visualize Bfs,I have to access and change some specific (based on their id) Box Component's classname to "Visited"

How can i achieve it?

These are my components

//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>
  )
}