JavaScript React Components React Component Patterns The React Challenge: Solution

Brunhilde Vink
Brunhilde Vink
9,102 Points

Icon(...): Nothing was returned from render. This usually means a return statement is missing.

I followed the exact same steps but it keeps giving me the above error.

Brunhilde Vink
Brunhilde Vink
9,102 Points
// Player.js

render() {

    const {
      name,
      id,
      score,
      index,
      removePlayer,
      changeScore,
      isHighScore
    } = this.props

    return (
      <div className="player">
        <span className="player-name">
          <button className="remove-player" onClick={() => removePlayer(id)}></button>
          <Icon isHighScore={isHighScore} />
          { name }
        </span>
        <Counter 
          score={score}
          index={index}
          changeScore={changeScore} 
        />
      </div>
    );
  }

// App.js

getHighScore = () => {
const scores = this.state.players.map( p => p.score );
    const highScore = Math.max(...scores);
    if (highScore) {
      return highScore;
    } 
    return null;
}

render() {

    const highScore = this.getHighScore();

    return (
      <div className="scoreboard">
        <Header players={this.state.players} />
        {this.state.players.map( (player, index) => 
          <Player 
            name={player.name}
            score={player.score}
            id={player.id}
            key={player.id.toString()} 
            index={index}
            changeScore={this.handleScoreChange}
            removePlayer={this.handleRemovePlayer}  
            isHighScore={highScore === player.score}
          /> )}
        <AddPlayerForm addPlayer={this.handleAddPlayer}/>
      </div>
    );
  }

// Icon.js

import React from 'react';
import PropTypes from "prop-types";

const Icon = (props) => {
    <svg viewBox="0 0 44 35" className={ props.isHighScore ? 'is-high-score' : null }>
        <path d="M26.7616 10.6207L21.8192 0L16.9973 10.5603C15.3699 14.1207 10.9096 15.2672 7.77534 12.9741L0 7.24138L6.56986 28.8448H37.0685L43.5781 7.72414L35.7425 13.0948C32.6685 15.2672 28.3288 14.0603 26.7616 10.6207Z" transform="translate(0 0.301727)" />
        <rect width="30.4986" height="3.07759" transform="translate(6.56987 31.5603)" />
    </svg>
};

Icon.propTypes = {
    isHighScore: PropTypes.bool
};

export default Icon;

1 Answer

Torben Korb
PRO
Torben Korb
Front End Web Development Techdegree Graduate 84,895 Points

Try to wrap your return from the Icon component in parentheses instead of curly braces or you'll return an object here instead of the SVG code.

const Icon = props => (
    <svg>...
    ...
    </svg>
);