SubmitXXpath en react

[andresplass]

Una duda, tenemos un form de react funcionando pero no logramos incluir los submitXXpath para el botón de submit en el nuevo form de react, es decir, el submitpath que antes usabamos en el _form clásico, no nos reconoce las funciones que le damos en el router. Hay una manera de dárselas, o la idea es reescribir todas estas funciones como dentro de react?

Muchas gracias 😊

[gpvidal]

Hola @andresplass ,

La pregunta del millón es: Dónde vive ese submitXXpath y dónde vive React? (cliente o servidor). Independiente de eso, puedes pasarle ese valor por medio de los dataset, o escribirla directamente en tu componente.

Para usar los datasets:

Dentro de HTML existen unos atributos que comienzan con data- que permiten agregar información a un elemento. Estos son los famosos datasets.

Para hacer uso de esto, te voy a poner un ejemplo: Quiero, en una vista, mostrar un saludo al usuario con su nombre en un componente React. El usuario, se accede por medio de la variable currentUser.

Entonces, del lado del servidor, voy a hacer una vista que tenga lo siguiente:

/src/views/users/_toolbar.html.ejs

<div id="user-toolbar" data-username="<%= currentUser.name %>"></div>

Luego, para que se muestre el componente React:

/src/assets/js/app.jsx

// [...] aquí pueden haber otras cosas
const reactUserToolbar = document.getElementById('user-toolbar');

if (reactUserToolbar) {
  ReactDOM.render(<UserToolbar serverData={reactUserToolbar.dataset} />, reactUserToolbar);
}
// [...]

Y el componente, ahora del lado del cliente, podría verse así (se ha simplificado para hacerlo más fácil):

/src/assets/js/components/UserToolbar.jsx

export default UserToolbar(props) {
  return <h1>Hola {props.serverData.username}!</h1>;
}

Como podrás darte cuenta, en este caso solo podrán pasar cadenas de texto. Por lo que si requieren pasar objetos o cosas más complejas podrían intentar con cosas como JSON.stringify() y JSON.parse().

[andresplass]

Ya profe muchas gracias, sirvió 👍 Eso sí, para el caso de las funciones, como por ejemplo que el onClick del boton me lleve al submit path, tendría que ser entonces con el JSON.xx de me dijo al final? Le di una vuelta a reescribir las funciones en mi componente pero no le encontré sentido, porque esas funciones, todas están en mi router y con variables del router, sería muy circular reescribir todo solo para hacer un form 😔

[gpvidal]

Pero si pasas la URL por datasets, podrías rescatarlas con this.props.serverData.submitPath o no?

[andresplass]

Es que sí, eso quizas sirva para lograr que el botón me lleve al lugar correcto, pero SubmitPath también llama al router(xx.create) para crear efectivamente un nuevo elemento en postgres. En otras palabras, necesito que sea mas que solo un url, creo D:

[gpvidal]

Ahh pero para eso tienes que hacer fetch a la ruta. Ojo ahí con uno de los ejemplos de React :wink:

[ibaeza1]

Hola profe! :) A que se refiere con un fetch en la ruta? Y de cual ejemplo habla? 🤔

[quememo]

Hola profesor, siguiendo lo que menciona de datasets, como haría para enviar funciones con parámetros? Pues me gustaría hacer uso de una función en un componente de React del estilo: (var)=> ctx.router.url(... , var.id) , sin embargo, estas no las puedo enviar con JSON.parse

[gpvidal]

Hola @ibaeza1

Y de cual ejemplo habla?

Del ejemplo de React donde se hace una llamada para obtener datos de una ruta externa. Ahí se usa fetch

Saludos,

[gpvidal]

Hola @quememo ,

Hola profesor, siguiendo lo que menciona de datasets, como haría para enviar funciones con parámetros?

Podrías generar las rutas en el lado del cliente, por qué necesitas esa función?

Saludos,

[ibaeza1]

Logramos postear datos de un form de react! :) al final lo hicimos con fetch(this.state.path, { method: 'POST', body: data, }); Por si a alguien le sirve. Lo otro es que ahora quiero que el form me lleve a otra pagina. En el handleSubmit deberia tener un redirect o algo para que cuando aprete el boton de submit me lleve a otra pagina, pero no se bien como hacerlo. Intente this.props.history.push('http://localhost:3000/users') Pero no me lleva a nada y me dice que no puede hacer push de algo indefinido. Como puedo hacerlo?

[quememo]

Hola @quememo ,

Hola profesor, siguiendo lo que menciona de datasets, como haría para enviar funciones con parámetros?

Podrías generar las rutas en el lado del cliente, por qué necesitas esa función?

Saludos,

Únicamente para ahorrarme el escribirla en el lado del cliente también. A pesar de este detalle profesor hay algo que me causa intriga, al pasar información mediante datasets en el archivo html.ejs, esta es fácilmente identificable por el usuario mediante la herramienta inspeccionar y me imagino en ocasiones se querrá enviar información más confidencial y este método la expone fácilmente, cómo se podría entonces hacer algo más seguro?

[gpvidal]

Hola @ibaeza1 ,

Lo otro es que ahora quiero que el form me lleve a otra pagina.

Pero por qué no ocultas el formulario y muestras un mensaje de que se actulizó con éxito?

Como comentario general, no entiendo por qué varios de ustedes quieren volver al comportamiento de redireccionar cuando React les permite hacer cosas más lindas :joy:

window.location podría servirte, pero un componente no debería tener este comportamiento.

Saludos,

[gpvidal]

Hola @quememo ,

Únicamente para ahorrarme el escribirla en el lado del cliente también

Pero tiene sentido escribirla de nuevo ya que son dos mundos distintos o no?

A pesar de este detalle profesor hay algo que me causa intriga, al pasar información mediante datasets en el archivo html.ejs, esta es fácilmente identificable por el usuario mediante la herramienta inspeccionar y me imagino en ocasiones se querrá enviar información más confidencial y este método la expone fácilmente, cómo se podría entonces hacer algo más seguro?

APIs :slightly_smiling_face:

Saludos,