JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const PlayerList = (props) => {
    
    const [selectedPlayer, setSelecterPlayer] = useState(undefined)

    const selectPlayer = (player)=> {
        setSelecterPlayer(player)
    }

    const setPenalty = () => {
        
    }

    useEffect(()=>{
        console.log(selectedPlayer);
    })

    return (
        <div>
            <ul>
                {props.playerList.map((player) => 
                <li key={player.id}
                    onClick={()=>selectPlayer(player.id)}>
                    {<Player 
                    name={player.name} 
                    number={player.number} 
                    penalties={0} />}
                </li>)}
            </ul>
            <button onClick={setPenalty}>+/- Pénalité(s)</button>
        </div>
    )
}