¿Sabes cómo editar un contenido en frontend? A la hora de escribir líneas de código, es importante tener claro el camino que se va a recorrer para ejecutar una acción. Por ello, pensar en nuestros proyectos de manera teórica es una gran ayuda para tener claridad antes de escribir. En este post, te enseñaremos nuestra aproximación teórica para editar un contenido en frontend usando la etiqueta form de HTML.
¿Cómo aproximarnos a editar un contenido en frontend?
Cuando hablamos de pensar en una aproximación teórica para editar contenido en frontend, nos referimos a pensar en el código que deberíamos ejecutar para que un usuario pueda editar su contenido en nuestra aplicación, así como se puede editar un tweet o un mensaje en Slack. Sin embargo, en vez de ejecutar este código, a continuación nos dedicaremos a pensar los pasos de manera teórica.
La edición de un contenido en frontend puede imaginarse de manera similar a la eliminación de un contenido. Es decir, puede ejecutarse con un botón que puede aparecer en el detalle del contenido cuando el usuario hace clic sobre él.
Entonces, podemos aproximarnos teóricamente a editar un contenido en frontend con los mismos pasos de la eliminación. Primero, deberemos ejecutar una validación de usuario para confirmar que el usuario actual es el mismo que ha creado el contenido, ya que no todo usuario debe ser capaz de editar todo contenido.
Al ser procesos fundamentalmente similares, te recomendamos leer nuestros artículos sobre crear un botón para borrar contenido en frontend y sobre el método para borrar contenido en frontend.
Tras la comprobación del JWT con el id del usuario creador del contenido, podremos mostrarle el botón de edición al usuario. En este botón, deberemos crear un evento (que podría hacerse usando el comando addEventListener) para programar la reacción al clic del botón.
Al programar la reacción al clic del botón, normalmente representado con un lápiz, debemos pensar en qué es lo que puede editar el usuario exactamente. En general, lo que las aplicaciones web permiten editar es el texto de un contenido. El usuario no debería poder cambiar propiedades como la fecha, los likes, el id, etc.
Una vez hayamos decidido qué elementos del contenido podemos editar, podremos programar una lógica en la que convertimos el contenido en un formulario con estos elementos como campos con posibilidad de edición. En este sentido, para editar un contenido en frontend deberemos hacer un proceso mucho más fuerte en HTML que en JavaScript.
Ahora que conoces nuestra aproximación teórica para editar un contenido en frontend, ¡ha llegado el momento de ejecutarla con tus propias líneas de código! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, una formación en la que aprenderás la teoría y la práctica de este mundo a la par que desarrollas tus propios proyectos web. ¡No te lo pierdas y solicita información!
