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
.