Estoy tratando de ponerme en práctica con GraphQL en React, consumiendo el servicio de back-end nHost para recuperar y guardar datos de/a una base de datos. Logré iniciar y cerrar sesión con éxito en la aplicación, pero ahora resulta que hay un problema. Mostrar los datos en un DataTable funciona bien, pero el problema es que cuando trato de renderizar un componente que pasa datos como accesorios, el componente no se renderiza en absoluto. En teoría: el botón que se muestra al final del código (representado solo si se realiza una selección de la tabla), debería activar handleView, que debería representar el componente con los accesorios pasados. Nota: console.log muestra datos. Además, React router dom está implementado en la aplicación. ¿Importa? ¿O simplemente mi código no está implementado correctamente?

Código a continuación:

 const [searchInput, setSearchInput] = useState(''); const [selectedclient, setSelectedclient] = useState(null) const handleView = (e) => { e.preventDefault(); console.log(selectedclient) if(selectedclient != null) return <MainPanel data={selectedclient}/> } return ( <div> <form onSubmit={(e) => handleView(e)}> <input className="input" placeholder="insert the user you are looking for" value={searchInput} onChange={e => setSearchInput(e.value)} ></input> <div className="card"> <DataTable value={filtered} selectionMode="single" selection={selectedclient} onSelectionChange={e => setSelectedclient(e.value)} dataKey="name" responsiveLayout="scroll"> <Column selectionMode="single" headerStyle={{width: '3em'}}></Column> <Column field="name" header="Name"></Column> <Column field="id" header="id"></Column> </DataTable> </div> {filtered?.length != 0 && <button type="submit" >Select</button> } </form> </div> )

El componente a renderizar:

 const MainPanel = (data) => { const { name } = data return ( <div> <div>MainPanel</div> <h3>{name}</h3> </div> ) }

Gracias por adelantado.