Skip to main content
Mejora del código de la interfaz
Origen Enlace
Sergio Gordillo
  • 471
  • 2
  • 10
  • 24

Ya he descubierto la forma de hacerlo. A ver, me tengo que crear una interfaz.

import { Dispatch, SetStateAction } from "react";

export interface SetInformationProps {
  setInformation: Dispatch<SetStateAction<string[]>>;
}

El tipo de setInformation te lo marca Visual Studio Code si te sitúas sobre setInformation, te hace un hover. Ahora en mi componente padre le pasaría la prop de la siguiente forma:

<AddCategory setInformation={setInformation} />

Y en el componente hijo tengo que importar la interfaz import { InformationProps } from "../interfaces"; y una vez que la tengo importada en el método que quiero modificar el useState del padre hacerlo de la siguiente forma:

  const handleSubmit = (e: any) => {
    e.preventDefault(); //It avoids the page to load again when the form is submitted
    setInformation((information: string[]) => [...information, inputValue]);
  };

Aquí es importante que accedo a information gracias al método setter del useState, porque realmente information no lo paso en mi interfaz, por eso lo hago así. Desestructuro el array y le meto mi valor al final del array. Y, se me olvidaba,

function AddCategory({ setInformation }: InformationProps)

He de pasar a esta función el setter del padre con su interfaz, para que no me de error.

P.D. La interfaz se puede hacer de forma más limpia de esta forma:

export interface SetInformationProps {
  setInformation: (information: string[]) => void;
}

Simplemente nos aprovechamos de las propiedades del useState para definir la interfaz. A fin de cuentas, ¿qué hace el setInformation? Actúa sobre un array de strings (information[]) y no retorna nada, por lo tanto su valor de retorno es void.

Ya he descubierto la forma de hacerlo. A ver, me tengo que crear una interfaz.

import { Dispatch, SetStateAction } from "react";

export interface SetInformationProps {
  setInformation: Dispatch<SetStateAction<string[]>>;
}

El tipo de setInformation te lo marca Visual Studio Code si te sitúas sobre setInformation, te hace un hover. Ahora en mi componente padre le pasaría la prop de la siguiente forma:

<AddCategory setInformation={setInformation} />

Y en el componente hijo tengo que importar la interfaz import { InformationProps } from "../interfaces"; y una vez que la tengo importada en el método que quiero modificar el useState del padre hacerlo de la siguiente forma:

  const handleSubmit = (e: any) => {
    e.preventDefault(); //It avoids the page to load again when the form is submitted
    setInformation((information: string[]) => [...information, inputValue]);
  };

Aquí es importante que accedo a information gracias al método setter del useState, porque realmente information no lo paso en mi interfaz, por eso lo hago así. Desestructuro el array y le meto mi valor al final del array. Y, se me olvidaba,

function AddCategory({ setInformation }: InformationProps)

He de pasar a esta función el setter del padre con su interfaz, para que no me de error.

Ya he descubierto la forma de hacerlo. A ver, me tengo que crear una interfaz.

import { Dispatch, SetStateAction } from "react";

export interface SetInformationProps {
  setInformation: Dispatch<SetStateAction<string[]>>;
}

El tipo de setInformation te lo marca Visual Studio Code si te sitúas sobre setInformation, te hace un hover. Ahora en mi componente padre le pasaría la prop de la siguiente forma:

<AddCategory setInformation={setInformation} />

Y en el componente hijo tengo que importar la interfaz import { InformationProps } from "../interfaces"; y una vez que la tengo importada en el método que quiero modificar el useState del padre hacerlo de la siguiente forma:

  const handleSubmit = (e: any) => {
    e.preventDefault(); //It avoids the page to load again when the form is submitted
    setInformation((information: string[]) => [...information, inputValue]);
  };

Aquí es importante que accedo a information gracias al método setter del useState, porque realmente information no lo paso en mi interfaz, por eso lo hago así. Desestructuro el array y le meto mi valor al final del array. Y, se me olvidaba,

function AddCategory({ setInformation }: InformationProps)

He de pasar a esta función el setter del padre con su interfaz, para que no me de error.

P.D. La interfaz se puede hacer de forma más limpia de esta forma:

export interface SetInformationProps {
  setInformation: (information: string[]) => void;
}

Simplemente nos aprovechamos de las propiedades del useState para definir la interfaz. A fin de cuentas, ¿qué hace el setInformation? Actúa sobre un array de strings (information[]) y no retorna nada, por lo tanto su valor de retorno es void.

Origen Enlace
Sergio Gordillo
  • 471
  • 2
  • 10
  • 24

Ya he descubierto la forma de hacerlo. A ver, me tengo que crear una interfaz.

import { Dispatch, SetStateAction } from "react";

export interface SetInformationProps {
  setInformation: Dispatch<SetStateAction<string[]>>;
}

El tipo de setInformation te lo marca Visual Studio Code si te sitúas sobre setInformation, te hace un hover. Ahora en mi componente padre le pasaría la prop de la siguiente forma:

<AddCategory setInformation={setInformation} />

Y en el componente hijo tengo que importar la interfaz import { InformationProps } from "../interfaces"; y una vez que la tengo importada en el método que quiero modificar el useState del padre hacerlo de la siguiente forma:

  const handleSubmit = (e: any) => {
    e.preventDefault(); //It avoids the page to load again when the form is submitted
    setInformation((information: string[]) => [...information, inputValue]);
  };

Aquí es importante que accedo a information gracias al método setter del useState, porque realmente information no lo paso en mi interfaz, por eso lo hago así. Desestructuro el array y le meto mi valor al final del array. Y, se me olvidaba,

function AddCategory({ setInformation }: InformationProps)

He de pasar a esta función el setter del padre con su interfaz, para que no me de error.