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

Brian Thomas
Brian Thomas
8,947 Points
Posted by Brian Thomas
Brian Thomas
8,947 Points

The React Challenge: Solution Create and use the Icon component

I have typed everything as the solution shows and i get this error:

"Icon(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

this was the svg file i copied from the video and added a className as solution says so.

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

2 Answers

michelle gleed
michelle gleed
23,811 Points

Hi Brian,

It appears your closing > is missing from the end of first line of your code. Also, is your code above written inside the return statement of a functional component?

This is my whole Icon.js file anyway, hopefully it helps....

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

const Icon = (props) => {
  return (
      <svg viewBox="0 0 44 35" className={ props.isWinning ? "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 = {
  isWinning: PropTypes.bool
}

export default Icon;
Rendra Pradana
Rendra Pradana
69 Points
Rendra Pradana
Rendra Pradana
69 Points

Hi, to use implicit return on functional component, we can drop the return statement and drop the {} surrounding the body.

import React from 'react'

const Icon = (props) =>
  <svg viewBox="0 0 44 35">
    <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>
  ;

export default Icon;