Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) React Component Patterns The React Challenge: Solution

Brunhilde Vink
Brunhilde Vink
9,102 Points
Posted by 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
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
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Torben Korb
Front End Web Development Techdegree Graduate 91,433 Points
Torben Korb
.a{fill-rule:evenodd;}techdegree seal-36
Torben Korb
Front End Web Development Techdegree Graduate 91,433 Points

Hi Brunhilde,

try to wrap your return from the Icon component in parentheses instead of curly braces or you'll return a block of code that returns nothing instead of the SVG code. 

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

Alternatively you can return the SVG code from inside the code block: 

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

Hope this helps you, happy coding!