Tenía el siguiente código que ayer funcionaba con el siguiente código (estoy usando React + TypeScript). Veamos la primera pieza de código, el componente padre:
function GifExpertApp() {
const [information, setInformation] = useState<string[]>(["Ronaldo"]);
return (
<div className="App">
<header className="App-header">
<h1>Gif Expert App</h1>
<AddCategory setInformation={setInformation} />
<hr />
<ol>
{information.map((information) => {
// return <GifGrid information={information} />;
<h1>Hola</h1>;
})}
</ol>
</header>
</div>
);
}
Veamos ahora el componente dónde tengo la barra de texto por dónde meto valores nuevos en el useState information
.
import React, { useState } from "react";
import { InformationProps } from "../interfaces";
function AddCategory({ setInformation }: InformationProps) {
const [inputValue, setInputValue] = useState<string>("How I met your mother");
const handleInputChange = (e: any) => {
setInputValue(e.target.value);
};
const handleSubmit = (e: any) => {
e.preventDefault(); //It avoids the page to load again when the form is submitted
if (inputValue.trim().length > 2) {
//In order to avoid insert elements without text
setInformation((information: string[]) => [...information, inputValue]);
setInputValue(" "); //Cleaning the textbar
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleInputChange}
className="textBar"
value={inputValue}
/>
</form>
);
}
export default AddCategory;
Veamos ahora la interfaz:
// import { Dispatch, SetStateAction } from "react";
export interface InformationProps {
// setInformation: Dispatch<SetStateAction<string[]>>;
// information: string[];
setInformation: (information: string[]) => void;
}
El problema es que me he puesto a hacer otro componente <GifGrid information={information} />
para hacer en dicho componente una llamada a una API de gifs y no sé si se ha liado Visual Studio Code o qué pero ya no funciona. Mis dudas son las siguientes:
¿Yo puedo tener una interfaz así? Porque mis problemas han empezado cuando he intentado usar los dos parámetros del
useState
en esta interfaz para reutilizar la misma interfaz que ya estaba utilizando pero con un nuevo componente:export interface InformationProps { information: string[]; setInformation: (information: string[]) => void; }
¿Cuando importo una interfaz en un componente, tengo que utilizar todos los componentes de la interfaz obligatoriamente o no es estrictamente necesario?
El programa ahora mismo no me compila porque una línea del componente
AddCategory
, es decir, esta:setInformation((information: string[]) => [...information, inputValue]);
me da el siguiente error: Argument of type '(information: string[]) => string[]' is not assignable to parameter of type 'string[]'.
y no comprendo por qué, ya que ayer esta misma línea con la misma información funcionaba. ¿Alguien sabe en qué estoy fallando? Gracias, saludos.