No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Code review: React Context y FormData

6/9
Recursos

Aportes 8

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Bueno, se que esto es algo que cada uno deber铆a estudiar por su cuenta, pero lo explicar茅 como lo entend铆, mi aporte.

FormData es una Web API que crea una estructura con los valores del formulario (No est谩 disponible solo en React, sino en cualquier archivo js). La ref que se crea del form no es una ref como la que normalmente se aplica a un input; normalmente cuando agregamos una ref a un input, podemos acceder al value haciendo inputRef.current.value; en este caso, la ref del form tiene todos los inputs adentro, pero no se puede acceder a sus valores con un form.current.value; FormData entonces crea una estructura de pares llave-valor que contiene esos valores, pero require que le pasemos una ref del formulario al constructor, por eso usamos la ref del form. Tambi茅n habr铆a podido hacerse de esta forma usando javascript normal:

const form = document.getElementById("form");
const formData = new FormData(form);

Pero como es React, el useRef nos sirve m谩s para el constructor del formData (no podemos usar getElementById porque, al ser React, en el momento en que el navegador lea estas l铆neas de c贸digo, a煤n no habr谩 agregado el form al DOM, por eso debemos usar useRef). Ese FormData entonces es una estructura clave-valor tipo Map, la cual trae la funci贸n get(<key>) para obtener el 鈥渧alor鈥 de cualquiera de sus 鈥渓laves鈥. Por eso las l铆neas 22, 23 y 24 usan formData.get(<key>).

Espero que se entienda y sirva de algo.

Me qued贸 de la siguiente manera:

Como pueden ver le agregu茅 un botoncito para mostrar u ocultar la contrase帽a usando Hero Icons.
Primero hacen la importanci贸n y el estado local

import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
...
const [showPassword, setShowPassword] = useState(false);
// Password Visibility
const togglePasswordVisibility = () => {
	setShowPassword(!showPassword);
};

Luego agregan la maquetaci贸n del bot贸n a su estilo:

        <p>
          <span className='font-normal'>Password: </span>
          <span className='relative'>
            <input
              type={showPassword ? 'text' : 'password'}
              className='pr-10'
              value={parsedAccount?.password}
              readOnly
            />
            <button
              className='absolute right-0 top-1/2 transform -translate-y-1/2 bg-transparent border-none'
              onClick={togglePasswordVisibility}
            >
              {showPassword ? (
                <EyeSlashIcon
                  className='h-5 w-5 text-gray-400 hover:text-gray-600'
                  aria-hidden='true'
                />
              ) : (
                <EyeIcon
                  className='h-5 w-5 text-gray-400 hover:text-gray-600'
                  aria-hidden='true'
                />
              )}
            </button>
          </span>
        </p>
![](https://static.platzi.com/media/user_upload/image-2433358f-d400-48be-92e1-07b80b1d8dce.jpg)
Yo lo que hice fue crear los estados y las funciones en el context (la peculiaridad es que el estado de login se lo a帽ad铆 al mismo user en vez de crear otra key en el localStorage con valores de true o false dependiendo el caso ) y utilice Link para la navegaci贸n por que no sabia de la existencia de Navigate, me hubiera facilitado un dolor de cabeza jajaja Creo que mi c贸digo esta bien comentado como para no explayarme mas. 馃榿 ![](https://static.platzi.com/media/user_upload/image-ede85add-d336-4c6f-b3a3-bbe47f69ef8e.jpg)Y mi SignIn ![](https://static.platzi.com/media/user_upload/image-2b92632e-2fba-4be7-b172-498473f6e64e.jpg)![](https://static.platzi.com/media/user_upload/image-f6a3946d-d663-4ba1-9510-df0aa07bb210.jpg)
Hola amigos a mi me costo mucho entender estos conceptos de OOP (programacion orientada a objectos por su siglas en ingles) voy a intentar explicarlo. Hay que entender 3 definiciones basicas: -Clase -Instancia -Metodos Las clases son usadas como herramientas para facilitarnos nuestro trabajo al programar y no tener que reescribir codigo y poder reusarlo, en una clase podemos tener muchas funciones y se llaman estas funciones atraves de **metodos**, entonces **JavaScript tiene sus propias clases internas nativas**(no tienen nada que ver con React) una de ellas es **FormData** (nombre de la clase). Asi como para una variable se tiene que inicializar con let, var, const etc..., una clase tambien debe ser inicializada con **new,** al "inicializar" se la llama **instancia** entonces al poner `const formData = new FormData(form.current)` esta haciendo una instancia con new de la clase FormData y esa clase necesita un parametro que seria form.current. Luego de hacer la **instancia** podemos utlizar los **metodos** que son funciones internas de las clases en este caso utiliza el **get** que es conocido para obtener los datos dentro del get hay strings 'name', 'password' y 'email', como sabe que esta informacion esta ahi? gracias a que el input tiene el **atributo name.** Es importante que esto que acabo escribir es de JavaScript no de React

Asi va quedando

Hola, les recomiendo tomarse un momento para leer la documentaci贸n y comprender mejor
https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Est谩 muy buena, vale la pena leerla