How do I pass one string of an array each time a component is rendered?

This component renders four cards for top teams in a database, they are already sorted by highest scores; I need a < p > tag that displays either “1st”, “2nd”, “3rd”, “4th” on each one. The current code displays “1st2nd3rd4th” in the < p > tag of each card.

const seed = ["1st", "2nd", "3rd", "4th"];
const place = seed.map((seed) => seed);

const TeamCard = ({data}) => {
    return (
        <TeamCardStyle>
            {!data && (
                <Spinner />
            )}
            {data && data.getGroupScores && (
                data.getGroupScores.slice(0, 4).map((group) => {
                    return (
                <Row>
                    <Col className="teamCard mt-2 mb-2">
                        <Row>
                            <p># {place}</p>
                        </Row>
                        <Row>
                        <Col className="hideSmall">
                            <img className="mouseOn" src="../images/group.png" />
                            <img className="mouseOff" src="../images/groupSelected.png" />
                        </Col>
                        </Row>
                    <p>{group.name}</p>
                    </Col>
                </Row>
                    )
                })
            )}    
        </TeamCardStyle>
    )
}

export default TeamCard

Happy Hacking!

Answer

You can use index from map function to get the relevant element from seed array.

const seed = ["1st", "2nd", "3rd", "4th"];

const TeamCard = ({data}) => {
    return (
        <TeamCardStyle>
            {!data && (
                <Spinner />
            )}
            {data && data.getGroupScores && (
                data.getGroupScores.slice(0, 4).map((group, index) => {
                    return (
                <Row>
                    <Col className="teamCard mt-2 mb-2">
                        <Row>
                            <p># {seed[index]}</p>
                        </Row>
                        <Row>
                        <Col className="hideSmall">
                            <img className="mouseOn" src="../images/group.png" />
                            <img className="mouseOff" src="../images/groupSelected.png" />
                        </Col>
                        </Row>
                    <p>{group.name}</p>
                    </Col>
                </Row>
                    )
                })
            )}    
        </TeamCardStyle>
    )
}

export default TeamCard