Estoy haciendo una aplicación en React con TypeScript y tengo la siguiente duda. Lo veremos mejor con el código. Aquí el código de mi componente App:
import React, { useState } from "react";
import AddCategory from "./components/AddCategory";
function App() {
const [information, setInformation] = useState<string[]>([
"Ronaldo",
"Zidane",
"Roberto Carlos",
"Morientes",
]);
// let handleSubmit = (e: string) => {
// setCategories(...categories, e)
// };
return (
<div className="App">
<header className="App-header">
<h1>Gif Expert App</h1>
<AddCategory setInformation={setInformation}/>
<hr />
<ol>
{information.map((information) => {
return <li key={information}>{information}</li>;
})}
</ol>
</header>
</div>
);
}
export default App;
Y aquí el código de mi componente hijo: AddCategory.
import React, { useState } from "react";
function AddCategory() {
const [inputValue, setInputValue] = useState<string>("How I met your mother");
const handleSubmit = (e: any) => {
e.preventDefault(); //It avoids the page to load again when the form is submitted
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
className="textBar"
value={inputValue}
/>
</form>
);
}
export default AddCategory;
Básicamente lo que quiero hacer es que cuando escribo en la barra de texto de AddCategory
y envío la información (con el handleSubmit
, ya sé que me falta por escribir el código que haría eso, pero básicamente sería usar el setInformation
del padre), me setee la información en el useState
de App
.
El problema es que para hacer eso, primero tendré que pasar como parámetro el setInformation
del padre al hijo. Al estar haciéndolo con TypeScript, no sé exactamente cómo enviarlo. Si lo envío así <AddCategory setInformation={setInformation}/>
me da el siguiente error: Type '{ setInformation: Dispatch<SetStateAction<string[]>>; }' is not assignable to type 'IntrinsicAttributes'.
; si lo pongo así <AddCategory setInformation={setInformation:React.Dispatch<React.SetStateAction<string[]>}/>
me da el siguiente error Type '{ setInformation: Dispatch<SetStateAction<string[]>>; }' is not assignable to type 'IntrinsicAttributes'.
(que es el mismo error que me daba de la otra forma vaya) y, en resumen, que no soy capaz de pasarle esa propiedad al hijo porque me da error constantemente. ¿Alguien sabe cómo podría indicárselo con TypeScript para que funcione? Gracias.