Estoy empezando con typescript y me están asaltando algunas dudas para hacer mi código más sólido. Tengo un componente que es un menu con tres opciones:
const List = ({ statusEvents }: { statusEvents: any }) => {
const match = useRouteMatch();
const handleStatusEvents = (status: string): void => {
statusEvents(status);
};
return (
<>
<ListStyled>
<li>
<NavLinkStyled
activeClassName="link"
to={`${match.path}/pendientes`}
onClick={() => handleStatusEvents("pendientes")}
>
Pendientes
</NavLinkStyled>
</li>
<li>
<NavLinkStyled
activeClassName="link"
to={`${match.path}/activas`}
onClick={() => handleStatusEvents("activas")}
>
Activas
</NavLinkStyled>
</li>
<li>
<NavLinkStyled
activeClassName="link"
to={`${match.path}/resultados`}
onClick={() => handleStatusEvents("resultados")}
>
Resultados
</NavLinkStyled>
</li>
</ListStyled>
</>
);
};
export default List;
Y su componente padre:
interface IPropsState {
index: number;
image: string;
title: string;
description: string;
time: string;
assistants: number;
isActive: boolean;
}
const EventPage = () => {
const [filter, setFilter] = useState<IPropsState[]>(ListOfEvents);
const handleChangeStatusEvents = (status: string) => {
switch (status) {
case "pendientes":
const pendientes = ListOfEvents.filter(
(event) => event.isActive === false
);
setFilter(pendientes);
break;
case "activas":
const activas = ListOfEvents.filter((event) => event.isActive === true);
setFilter(activas);
break;
case "resultados":
const resultados = ListOfEvents;
setFilter(resultados);
}
};
return (
<MainLayout>
<Spacer height="30" />
<Title text="Eventos" />
<Spacer height="30" />
<List statusEvents={handleChangeStatusEvents} />
{filter ? <ListEvents events={filter} /> : <EmptyEvents />}
</MainLayout>
);
};
export default EventPage;
En este menú lo que hace es enviar a través del onClick a una función handleStatusEvents a su componente antecesor pasando por props un texto con el nombre de cada categoría.
onClick={() => handleStatusEvents("pendientes")}
const handleStatusEvents = (status: string): void => {
statusEvents(status);
};
El tipado de la función handleStatusEvents es de tipo void y los argumentos son de tipo string. Cuando quiero pasarle el statusEvents a su padre (por props)
const List = ({ statusEvents }: { statusEvents: any }) => {}
tengo que poner :any porque en el componente padre, la prop statusEvents está llamando a una función que setea los states. Entonces es aquí que clase de tipado tengo que ponerle (que no sea any), porque por una parte entiendo que desde el componente hijo está "saliendo" un string por props, pero el padre está llamando una función... No entiendo muy bien que tipado sería el deseado. Muchas gracias por la ayuda.