Intenté renderizar la función gridWithNode dentro del renderizado que no funciona y recibo este error: Advertencia: las funciones no son válidas como un niño de React. Esto puede suceder si devuelve un Componente en lugar de hacerlo desde el procesamiento. O tal vez quisiste llamar a esta función en lugar de devolverla. en div en Pathfind (http://localhost:3000/static/js/bundle.js:185:74) en div en App

mi código se ve así en Pathfind.js

 import React, { useState, useEffect } from "react"; import Node from './Node'; import './Pathfind.css'; const rows = 5; const cols = 5; const Pathfind = () => { const [Grid, setGrid] = useState([]); useEffect(() => { initializeGrid(); }, []); // CREATES THE GRID const initializeGrid = () => { const grid = new Array(cols); for (let i = 0; i < cols; i++) { grid[i] = new Array(rows); } createSpot(grid); setGrid(grid); } // CREATES THE SPOT const createSpot = (grid) => { for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { grid[i][j] = new Spot(i, j); } } }; // SPOT CONSTRUCTOR function Spot(i, j) { this.x = i; this.y = j; this.f = 0; this.g = 0; this.h = 0; } // GRID WITH NODE const gridWithNode = () => { <div> {Grid.map((row, rowIndex) => { return ( <div key={rowIndex} className='rowWrapper'> {row.map((col, colIndex) => { return ( <Node key={colIndex} /> ) })} </div> ) })} </div> } console.log(Grid); return ( <div className="Wrapper"> <h1>Pathfind Component</h1> {gridWithNode} </div> ) } export default Pathfind;