Stats.js is getting an error Cannot read property 'length' of undefined

Stats.js file below:

import React from 'react'

const Stats = ({players}) => {

console.log("Players: " + players);

const totalPlayers = players.length; const totalPoints = players.reduce( (total, player) => { return total + player.score; }, 0);

return ( <table className="stats"> <tbody> <tr> <td>Players:</td> <td>{ totalPlayers }</td> </tr> <tr> <td>Total Points:</td> <td>{ totalPoints }</td> </tr> </tbody> </table> ); }

export default Stats;

Player.js below:

import React, { PureComponent} from "react"; import Counter from "./Counter_"

class Player extends PureComponent { render() {

const {
  name,
  id,
  score,
  index,
  removePlayer,
  changeScore
} = this.props;
console.log(name + ' rendered');
return(
  <div className="player">
        <span className="player-name">
            <button className="remove-player" onClick = { ()=> removePlayer(id)}>✖</button>
          { name }
        </span>
    <Counter
      score={score}
      index ={index}
      changeScore={changeScore}
    />
  </div>
);

}

}

export default Player;

Error:

Players: undefined Stats.js:8 Uncaught TypeError: Cannot read property 'length' of undefined at Stats (Stats.js:8)