1

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.

1 respuesta 1

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.