i have a problem in increment-ting need Help!!!

    <script type="text/babel">
      var Users=[
      {
        name:"Mostfa",
        score:"21",
        id:1
      },
      {
        name:"Alicja",
        score:"40",
        id:2
      },
      {
        name:"Mazen",
        score:"34",
        id:3
      },



      ];







      function Header(props){
      return (

              <div className="header">
              <h1>{props.title}</h1>
              </div>
      );

    }
         Header.propTypes = {
        title:PropTypes.string.isRequired
      };


      class Counter extends React.Component
      {

       constructor (props) {
              super(props);


            this.state = { score:props.step };
            this.incrementScore=this.incrementScore.bind(this)
            this.decrementScore=this.decrementScore.bind(this)
       }


       incrementScore(){ 
this.setState( {
score: this.state.score +1,

   decrementScore(){
   this.setState({   
  score:this.state.score -1


 })
 };

    render (){

    return(

      <div className="counter">
                        <button className="counter-action decrement" onClick={this.decrementScore}>-</button>
                        <div className="counter-score">{this.state.score} </div>
                        <button className="counter-action increment" onClick={this.incrementScore}>+</button>
         </div>  
      );
    }
    }
    Counter.propTypes = {

    function Players(props) {
    return(
            <div className="player">
                    <div className="player-name">
                      {props.name}
                    </div>
                    <div className="player-score">
                    <Counter step={props.score} />

                    </div>                     
                  </div> 
      );
  }

   Players.proptypes ={
   name:PropTypes.string,
   score:PropTypes.string,
 };

        function Play(props){
            return (

           <div className="scoreboard">
            <Header title={props.title} />

              <div  className="players">

                {props.players.map((players)=>{

                  return <Players name={players.name} score={players.score} id={players.id} />



                                      })}


              </div>
            </div>
            );
        }

   Play.proptypes ={

   title:PropTypes.string,
  players: PropTypes.arrayOf(
      PropTypes.shape({
        name:PropTypes.string,
        score:PropTypes.string,
        id:PropTypes.number,

    }))
 };



      Play.defaultProps = {
      title:"scoreboared",
    }

      ReactDOM.render(<Play players={Users}/>, document.getElementById('container'));
    </script>
</body>