JavaScript React Components React Component Patterns The React Challenge: Solution

Brian Thomas
Brian Thomas
7,130 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>;

Jenni Sten
Jenni Sten
Full Stack JavaScript Techdegree Student 12,355 Points

The provided solution doesn't return the svg element, try returning it within your functional icon component.

2 Answers

michelle gleed
michelle gleed
23,569 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;

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;