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 trialBrian Thomas
8,947 PointsThe 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
23,811 PointsHi 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
69 PointsHi, 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;
Jenni Sten
Full Stack JavaScript Techdegree Student 12,355 PointsJenni Sten
Full Stack JavaScript Techdegree Student 12,355 PointsThe provided solution doesn't return the svg element, try returning it within your functional icon component.