Tengo una página de inicio con una tabla que tiene pocas entradas. Encima de la tabla tengo un botón llamado agregar entrada. Cuando el usuario hace clic en Agregar entrada, se abre un modal, donde el usuario puede agregar algunos detalles y enviarlos. El botón Enviar hace una llamada a la API para almacenar los datos en la base de datos. Una vez que la llamada a la API es exitosa, el modal se cierra. Ahora, ¿cómo actualizo el componente principal después del cierre modal para que los datos recién agregados se muestren en la tabla (que se carga a través de una llamada a la API)? Estoy usando componentes funcionales. Estoy buscando los pasos que debo seguir, no el código completo (el pseudocódigo servirá). No estoy usando redux. no quiero hacer winow.reload(). ya que recarga toda la página.
haga una función async fetchData que le traerá datos de la tabla todo lo que haya pasado esa función fetchData a modal y, en caso de éxito, llame a esa función fetch
const [loading,setLoading] = useState(false) const [data,setData] = useState() const fetchPlans = async () => { try { setLoading(true); const getDataRes = await getData(); // save that data in state that will reredener page setData(getDataRes.data); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (error) { console.log(error) } finally { setLoading(false); } }; </>Puede crear una función de devolución de llamada en el componente principal y pasarla al componente secundario como una propiedad