Passing and receiving multiple props to a mapped component

I’m mapping the TeamsContainer component and trying to pass it multiple props. However what i’ve tried doesn’t seem to be working. This is the page where the component is called:

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}
          />
        ))}
    </>
  );
};

and here is part of the TeamsContainer component.

import { Tournament } from "../types";

interface Props {
  tournament: Tournament;
  leagueFilter: string;
}

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, ...tournament }) => {

  return (
    <>
    </>
  );
};
export default TeamsContainer;

if i replace <Props> with <Tournament> and remove leagueFilter it works, but with the code im using above i get the error Property does not exist on type '{ tournament: Tournament; children?: ReactNode; }'.ts(2339)

I’m not sure how to set the Props interface within the mapped function, or if this is the way to go about it.

>Solution :

Your existing Props interface is fine, the problem is that you’re using spread and rest unnecessarily. Your interface expects to see a property called tournament, not the individual properties that Tournament has. So pass it a Tournament (tournament={tournament} rather than ...tournament):

{tournaments.map((tournament: Tournament, index: number) => (
  <TeamsContainer
    key={tournament.bout + tournament.league}
    tournament={tournament}
    leagueFilter={leagueFilter}
  />
))}

…and receive it without using rest syntax (tournament instead of ...tournament):

const TeamsContainer: FunctionComponent<Props> = ({ leagueFilter, tournament }) => {
    // ...
};