JavaScript React Basics (retired) Thinking in Components Decomposing our Application

Umeed Emad
PRO
Umeed Emad
Pro Student 1,150 Points

Getting this error with my code in console (Warning: Player(...): A valid React element (or null) must be returned...)

function Header(props){

    return(

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

    );

}
Header.propTypes = {

    title: React.PropTypes.string.isRequired,
};

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

            <div className="player-score">
                <div className="counter">
                    <button className="counter-action decrement"> - </button>
                    <div className="counter-score">{props.score}</div>
                    <button className="counter-action increment"> + </button>
                </div>
            </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">
                <Player name="Umeed Emad" score={50} />
                <Player name="Miad Emad" score={32} />
            </div>
        </div>
    );   
}

Application.defaultProps ={

    title: "Scoreboard",
}

ReactDOM.render(<Application />, document.getElementById('container'));

2 Answers

Nathan Gell
Nathan Gell
8,375 Points

Hi Umeed,

In the return statement of your Player function class, place the opening parenthesis on the same line as the return keyword. I do this all the time!

Should look like this:

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

            <div className="player-score">
                <div className="counter">
                    <button className="counter-action decrement"> - </button>
                    <div className="counter-score">{props.score}</div>
                    <button className="counter-action increment"> + </button>
                </div>
            </div>
        </div>
    );    
}
Umeed Emad
PRO
Umeed Emad
Pro Student 1,150 Points

Thanks Nathan Gell Did not realize it could be the issue :)