[Duda] Duda sobre useContext

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

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!