JavaScript React Basics (retired) Thinking in Components Loops and Lists in JSX

Warning: Failed propType: Application: prop type `players` is invalid; it must be a function, usually from React.PropTyp

After the compilation I see that error but I dont understand why players must be function?

3 Answers

nico dev
nico dev
20,360 Points

Hi Joshua Weber,

I know it's a little late, but hopefully not yet too late. :)

Maybe you already found out, but just in case, the thing in your code that's giving you that error is a misspelling in your isRequired for the players prop of the Application component, almost at the end of your code.

To be more specific, right here:

Application.propTypes = {
  title: React.PropTypes.string,
  players: React.PropTypes.arrayOf(React.PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    score: React.PropTypes.number.isRequired,
    id: React.PropTypes.number.isRequired,
  })).isRequred, // should say isRequired
};

I think the rest is perfect. Worked perfect when I tried it, just correcting that one.

Joshua Weber
Joshua Weber
7,411 Points

hey zahid hasan how did you fix the error? I'm getting the same error you mentioned.

var PLAYERS = [
  {
    name: "My Name",
    score: 31,
    id: 1,
  },
  {
    name: "Her Name",
    score: 142,
    id: 2,
  },
  {
    name: "His Name",
    score: 75,
    id: 3,
  },
  {
    name: "Your Name",
    score: 62,
    id: 4,
  },
]

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

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

function Counter(props) {
  return (
    <div className="counter">
      <button className="counter-action decrement"> - </button>
      <div className="counter-score"> {props.score} </div>
      <button className="counter-action increment"> + </button>
    </div> 
  );
}

Counter.propTypes = {
  score: React.PropTypes.number.isRequired,
}

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

Player.propTypes = {
  name: React.PropTypes.string.isRequired,
  score: React.PropTypes.number.isRequired,
}

function Application(props) {
  return(
    <div className="scoreboard">
      <Header title={props.title} />

      <div className="players">
        {props.players.map(function(player) {
          return <Player name={player.name} score={player.score} key={player.id} />
        })}
      </div>
    </div>
  );
}

Application.propTypes = {
  title: React.PropTypes.string,
  players: React.PropTypes.arrayOf(React.PropTypes.shape({
    name: React.PropTypes.string.isRequired,
    score: React.PropTypes.number.isRequired,
    id: React.PropTypes.number.isRequired,
  })).isRequred,
};

Application.defaultProps = {
  title: "Scoreboard",
}


ReactDOM.render(<Application players={PLAYERS}/>, document.getElementById('container'));
Jon Wood
Jon Wood
9,884 Points

Can't tell for sure since there's no code, but the component must be specifying what types the props are. It's probably saying that it requires a function, but you may be passing in something else like maybe a string.

I have fixed it. Thank you.