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

Question

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

Answer 1 · 2017-09-01T09:05:44Z

September 1, 2017 9:05am

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.

Answer 2 · 2017-08-03T19:08:54Z

August 3, 2017 7:08pm

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'));

Answer 3 · 2017-05-18T14:24:31Z

May 18, 2017 2:24pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

zahid hasan

zahid hasan

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

3 Answers

nico dev

nico dev

Joshua Weber

Joshua Weber

Jon Wood

Jon Wood

zahid hasan

zahid hasan