I had the following code yesterday that was working with the following code (I'm using React + TypeScript). Let's look at the first piece of code, the parent component:
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>
);
}
Now let's see the component where I have the text bar where I put new values in the 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;
Now let's see the interface:
// import { Dispatch, SetStateAction } from "react";
export interface InformationProps {
// setInformation: Dispatch<SetStateAction<string[]>>;
// information: string[];
setInformation: (information: string[]) => void;
}
The problem is that I have started to make another component <GifGrid information={information} />
to make a call to a gifs API in said component and I don't know if Visual Studio Code has been messed up or what but it doesn't work anymore. My doubts are the following:
Can I have an interface like this? Because my problems started when I tried to use the two del parameters
useState
in this interface to reuse the same interface I was already using but with a new component:export interface InformationProps { information: string[]; setInformation: (information: string[]) => void; }
When I import an interface into a component, do I have to use all the components of the interface or is it not strictly necessary?
The program right now does not compile for me because a line of the component
AddCategory
, that is, this:setInformation((information: string[]) => [...information, inputValue]);
it gives me the following error: Argument of type '(information: string[]) => string[]' is not assignable to parameter of type 'string[]'.
and I don't understand why, since yesterday this same line with the same information worked. Does anyone know what I'm doing wrong? Thanks greetings.
Sure you can, right now you have an interface that has a function. That setInformation function needs an array of strings as parameters and returns nothing.
It is not necessary, by declaring a property as optional it is no longer mandatory. I leave you an example here
It doesn't compile for you because the function just expects an array of strings, and you're passing it a function declaration. For it to work you should use that function like this:
The solution is to add the possibility of using an arrow function inside the setState that you have in the interfaces: