Estoy mapeando el componente TeamsContainer y tratando de pasarle múltiples accesorios. Sin embargo, lo que he intentado no parece estar funcionando. Esta es la página donde se llama el componente:
const UserPage: NextPage<Props> = ({ tournaments, trainerData }) => { const [leagueFilter, setLeagueFilter] = useState(""); return ( <> <Navbar /> <Select onChange={(e) => setLeagueFilter(e.target.value)}> <option value="Great">Great</option> <option value="Ultra">Ultra</option> <option value="Master">Master</option> </Select> {tournaments.map((tournament: Tournament, index: number) => ( <TeamsContainer key={tournament.bout + tournament.league} {...tournament} leagueFilter={leagueFilter} /> ))} </> ); }; y aquí es parte del componente TeamsContainer .
import { Tournament } from "../types"; interface Props { tournament: Tournament; leagueFilter: string; } const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, ...tournament }) => { return ( <> </> ); }; export default TeamsContainer; si reemplazo <Props> con <Tournament> y leagueFilter , funciona, pero con el código que estoy usando arriba aparece el error Property does not exist on type '{ tournament: Tournament; children?: ReactNode; }'.ts(2339)
No estoy seguro de cómo configurar la interfaz Props dentro de la función mapeada, o si esta es la forma de hacerlo.
Su interfaz Props existente está bien, el problema es que está usando propagación y descanso innecesariamente. Su interfaz espera ver una propiedad llamada tournament , no las propiedades individuales que tiene Tournament . Así que páselo un Tournament ( tournament={tournament} en lugar de ...tournament ):
{tournaments.map((tournament: Tournament, index: number) => ( <TeamsContainer key={tournament.bout + tournament.league} tournament={tournament} leagueFilter={leagueFilter} /> ))} ... y recíbalo sin usar la sintaxis de descanso ( tournament en lugar de ...tournament ):
const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, tournament }) => { // ... };