Desarrollo de Aplicación RIA en Code Sandbox

Como dato curioso acerca de porqué se recarga la página cuando haces click en esos botones, es porque al estar dentro de un <form>, los elementos button que no tienen el type (button o submit) por default se le asigna el submit, y al darle click se ejecuta se ejecuta el submit del form lo cual genera la recarga de la página.

Enrique Geraldino

Esta es la sintaxis para quien no lo vea claro <button type="button"> - </button>

Cristian David Casallas Velandia

Para prevenir esto existe un metodo en el prototype del evento que se llama preventDefault en JS.

Cristian Blandon

¿Cómo evitar que todos los componentes vayan envueltos en etiquetas <div> y por ende el DOM se llene de divs innecesarios? En vez de envolver todo el componente entre etiquetas <div> se puede usar la etiqueta de JSX <React.Fragment> (o su "shorthand"... <>):

<React.Fragment>
	<h3>Titulo</h3>
	<form>...</form>
</React.Fragment>

Lo cual sería equivalente a:

<>
	<h3>Titulo</h3>
	<form>...</form>
</>

¿Cómo hacer que la página no se recargue? Se puede asociar una función que se ejecute onclick en cada botón, o como submit del form, cuya primera línea sea event.preventDefault().

Sebastian Heredia

Que pro bro, muchas gracias.

Diego Alvaro Parra Abad

Grande Cristian!

Miguel Angel Reyes Moreno

Agregar esto a los botones del formulario para evitar que se recargue la página:

<button type="button"> - </button> 0 <button type="button"> + </button>

Raycris Maldonado

Asi es solo tenemos que agregar el tipo button a los botones. Genial!

Santiago Lopera Naranjo

Pequeño recordatorio, siempre que uses map para renderizar algun componente, recuerda que despues de la flecha, debes poner parentesis en vez de corchetes, ya que esto indicia un retorno expicito.

{movies.map(movies =>(
        <h4>{movies.name}</h4>
      ))}

Sebastián Ariel Cóceres

Eso es un aplicación de las arrow function en realidad. Las arrow functions tienen el return de manera implícita cuando se trata de funciones de una sola línea.

const foo = x => x + 1;

Es recomendable utilizar los paréntesis cuando lo que se le asigna a la arrow function es un objeto (para que sea bien interpretado y no se confunda las llaves del objeto con las de la función)

const foo = () => { bar: 1 } // undefined
const foo = () => ({ bar: 1 }) // {bar: 1}

Dylan leonardo

XD llevo comparando el codigo como loco a ver dónde me equivoque y era justo eso jajajaja, muchas gracias

Yefri Enmanuel Encarnación Jiménez

Como dice nuestro compañero @elviss el elemnto button dentro de un form viene predeterminado (by default) como tipo submit que lo que hace es enviar el formulario y tal evento recarga la pagina, tiene 2 soluciones a mi parecer:

1- Manejar el evento submit del form y usar la función event.preventDefault(), documentación aquí

2- Cambiarle el tipo de button a nuestros button con type="button", y así no activara ningún tipo de accíon o evento.

Mi codigo y resulución del reto:

App.js

import "./styles.css";
import Form from "./Form.js";

const movies = [
  {
    name: "Green Movie",
    Available: 6
  },
  {
    name: "Superman",
    Available: 8
  },
  {
    name: "Marvel Universe",
    Available: 4
  }
];

export default function App() {
  return (
    <div>
      <h2>Peliculas</h2>
      <Form movies={movies} />
    </div>
  );
}

**Form.js **

import React from "react"

export default function Form(props){
  const { movies } = props
  return ( movies.map(movie => {
    return(<form>
            <h3>movie.name</h3>
            <button type="button"> - 
            </button>0
            <button type="button"> + 
            </button>
          </form>
      )
  })
  )
}

Jorge Andrés Barrientos Gil

Como buena práctica estuve leyendo que es recomendable que los componentes que vamos creando sean de extensión jsx, en lugar de js, en términos funcionales no cambia nada, pero visualmente nos permite con solo un vistazo darnos cuenta de que un archivo es un componente. Incluso con un plugin adecuado, el árbol de carpetas mostrará el logo de react en estos archivos que son componentes.

David Argote

Si realizamos una función handlerSubmit que reciba como parámetro el event y llamamos al método preventDefault podemos hacer que nuestra página no se recargue a la hora de disparar el evento submit.

function handlerSubmit( event ) {
   event.preventDefault()
}

Se me ocurre esto 😅.

Max Andy Diaz Neyra

sin duda es la opcion correcta si fuera un formulario para enviar datos, pero en este caso, es mejor usar type="button" para neutralizar el type submit por defecto

Sebastián Buitrago

Codigo de Form.js

import React from "react";

export default function Form(props) {
  const { movie } = props;
  return (
    <form>
      <h4>{movie.name}</h4>
      <button> - </button>0<button> + </button>
    </form>
  );
}

Codigo de App.js

import Form from "./Form";

const movies = [
  {
    name: "Avengers",
    available: 5
  },
  {
    name: "Terminator",
    available: "3"
  }
];

export default function App() {
  return (
    <div>
      <h3>Peliculas</h3>
      {movies.map((movie) => (
        <Form movie={movie} />
      ))}
    </div>
  );
}

David Alejandro Ramírez Pérez

tip XD: al importar la función, tiene q estar con la primera letra en mayúscula =S sino no importa la función:

import ++Theform++ from "./formOne.js"; ... < ++Theform++ myMovies={myMovies} />

Iván Garcia

Desafío: Para quitar el refresh del button, tenemos que settear el atributo dentro button como button. <button type="button" ></button> Ya que viene como un submit por default.

Anfernee Valera

Para que deje de refrescar podemos cambiar el type del button así:

<button type="button">

Joel Andres Bonilla Tellez

no se olviden la prop key

<div>
      <h3>Peliculas</h3>
      {movies.map((peli) => (
        <Form peli={peli} key={peli.name} />
      ))}
    </div>

José Alberto Ramírez Quiroz

https://stackblitz.com/ Les deje este otro editor que me gusto mas

Reinaldo Mendoza

Es bien pesado, pero bueno

Danny Pacheco

Los botones internos del form por defecto usan el método GET, por lo que es necesario quitarle desde JS el método GET cuando se realice un click.

Reinaldo Mendoza

preventDefault

OSCAR DAVID MUÑOZ ROA

Hace un año

Un componente en Angular es una parte fundamental de la interfaz de usuario que encapsula la lógica y la presentación. Un módulo, por otro lado, es un contenedor que agrupa componentes, directivas, pipes y servicios relacionados, facilitando la organización de la aplicación.

Mientras que los componentes se encargan de la visualización y la interacción, los módulos permiten la modularidad y la reutilización de esos componentes en diferentes partes de la aplicación, lo que mejora la estructura y el mantenimiento del código.

Cristian Nahuel Kairiyama

es necesario importar React from "react" en el archivo de Form.js?

Juan Castro

Profesor

Esta configuración de Babel puede permitirnos que el import de React sea implícito: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup

Aún así, por costumbre yo prefiero hacer el import manual/explícitamente siempre que pueda.

Steven Varela

¿Porqué se accede al directorio con un punto seguido de un símbolo de slahs? es decir:

"./" ¿porqué se hace de esta manera? ¿no se puede hacer directamente si estamos en el mismo directorio sin colocar el punto slash?

Axel Yaguana

Team Platzi

Hola.

El ./ es como un estándar para decir "aquí". De esto salen las rutas, por ejemplo, si quieres retroceder usas ../ y así.

En otras palabras, esto sirve para todos los lenguajes de programación y es la manera más prolija para facilitar el manejo de rutas.

Adriel Francesco Pezo Vizcarra

Acotando a lo que escribió axl, nos ayuda a la hora de escalar el proyecto y tener mas directorios, y que el programa no falle a la hora de traer el código.

Daniela Hernández Valencia

para evitar que se recargue <button type="button">

Rubén Ernesto Aragón Gil

      <button type="button"> - </button>
      0<button type="button"> + </button>

Santiago Ruberto