1
respuesta

[Duda] Duda sobre useContext

por Hernán Darío Calvo Cornelio
| 80.4k xp | 32 posts

Tengo este pequeño form de mi AluraGeek 

const NuevoVideo = () => {

  const { register, handleSubmit, formState:{errors, isValid}, control} = useForm()

  const equipmentCategory = useContext(EquipmentCategoryContext)

  return(
    <ContenedorFormulario>
      <Title>Nuevo video</Title>
        <Form onSubmit={handleSubmit((data) => {
          if(isValid){
            console.log(data)
            return data
          }
        })}>
          <ContainerInputs>
            <Input
              type="text" 
                {...register("title",{
                  required: "Este campo es requerido",
                  minLength: {
                    value: 1,
                    message: "Minimo un caracter en el campo de titulo"
                  }
                })}
                placeholder="title" />
              {errors.title && <InputErrors>{errors.title?.message}</InputErrors>}
            <Input 
              type="text"
                {...register("video",{
                  required: "Este campo es requerido",
                  minLength: {
                    value: 1,
                    message: "Minimo un caracter en el campo de video",
                  }
                })}
                placeholder="Link video" />
              {errors.video && <InputErrors>{errors.video?.message}</InputErrors>}
            <Input 
                type="text"
                {...register("image",{
                  required: "Este campo es requerido",
                  minLength: {
                    value: 1,
                    message: "Minimo un caracter en el campo de image",
                  }
                })}
                placeholder="Link image" />
              {errors.image && <InputErrors>{errors.image?.message}</InputErrors>}
            <Controller
                control={control}
                name="category"
                rules={{
                  required: "Este campo es requerido"
                }}
                render={({ field: {onChange, onblur, value, name ,ref }}) => {
                  return <InputSelect
                    name={name}
                    ref={ref}
                    onBlur={onblur}
                    defaultValue={value}
                    onChange={({value}) =>{
                      onChange(value)
                    }}
                    placeholder="Choose an option"
                    options={equipmentCategory}
                    getOptionLabel={(e) => e.label}
                    getOptionValue={(e) => e.value}
                  />
                }} />
              {errors.category && <InputErrors>{errors.category?.message}</InputErrors>}
            <InputTextarea
                {...register("comments",{
                  required: "Este campo es requerido",
                  minLength: {
                    value: 1,
                    message: "Minimo un caracter en el campo de comments",
                  }
                })}
                placeholder="add a comments" />
              {errors.comments && <InputErrors>{errors.comments?.message}</InputErrors>}
            <Input
                type="text"
                {...register("securityCode",{
                  required: "Este campo es requerido",
                  minLength: {
                    value: 1,
                    message: "Minimo un caracter en el campo de securityCode",
                  },
                  maxLength: {
                    value: 8,
                    message: "Maximo solo 8 caracteres en el campo de securityCode"
                  }
                })} 
                placeholder="Enter a security Code (xxxxxxxx)" />
              {errors.securityCode && <InputErrors>{errors.securityCode?.message}</InputErrors>}
            <ContenedorBotones>
                <BotonGuardar 
                  text="save" 
                  type="submit">
                    Save
                </BotonGuardar>
                <BotonLimpiar 
                  text="clear" 
                  type="reset">
                    Clear
                </BotonLimpiar>
                <BotonNuevaCategoria 
                  text="new category">
                    New Category
                </BotonNuevaCategoria>
            </ContenedorBotones>
          </ContainerInputs>
      </Form>
    </ContenedorFormulario>
  );
}

export default NuevoVideo

no pude poner los import porque no me daba el espacio, pero necesito que al dar submit a este form los datos se me encapsulen de una forma global como en un useContext me gustaria si alguien me puede ayudar y darme esa respuesta

1 respuesta
por Bruno Botelho de Souza
| 3933.7k xp | 14897 posts
Alura Scuba Team Scuba Team | Front-end

Hola Hernán,

Para resolver tu problema, podrías crear un contexto global y usar la función useContext para acceder a los datos del formulario en cualquier lugar de tu aplicación. Aquí te dejo un ejemplo de cómo podrías hacerlo:

Primero, crea un nuevo archivo para tu contexto global. Por ejemplo, podrías llamarlo FormContext.js:

import { createContext } from 'react';

const FormContext = createContext();

export default FormContext;

Luego, en tu componente principal (usualmente App.js), debes envolver tu aplicación con el proveedor de este contexto, y establecer un estado que almacenará los datos del formulario:

import React, { useState } from 'react';
import FormContext from './FormContext';
import NuevoVideo from './NuevoVideo';

function App() {
  const [formData, setFormData] = useState(null);

  return (
    <FormContext.Provider value={{ formData, setFormData }}>
      <NuevoVideo />
    </FormContext.Provider>
  );
}

export default App;

Finalmente, en tu componente NuevoVideo, puedes acceder a setFormData y usarlo para actualizar los datos del formulario cuando se envíe el formulario:

import React, { useContext } from 'react';
import FormContext from './FormContext';

const NuevoVideo = () => {
  // ...otros códigos...

  const { setFormData } = useContext(FormContext);

  const onSubmit = (data) => {
    if (isValid) {
      console.log(data);
      setFormData(data);  // Aquí actualizamos los datos del formulario.
      return data;
    }
  };

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      {/* ...otros códigos... */}
    </Form>
  );
};

export default NuevoVideo;

Ahora, cada vez que se envíe el formulario, los datos del formulario se almacenarán en formData, y podrás acceder a ellos desde cualquier lugar de tu aplicación usando el contexto FormContext.

Espero que este ejemplo te ayude a entender cómo puedes usar useContext para compartir los datos del formulario a nivel global. Si tienes alguna pregunta sobre este código, no dudes en preguntar.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!