Decreasing a Number Range component breaks code

[Barry Ross Jr]

Loving the course and am already putting my new skills to the test.

I’m building out a component that allows you to pick a range of numbers between 1-5 that will build out a star rating component.

I noticed that when increasing the range it works perfectly (going from 1 to 5), but the moment i try to decrease the number it breaks my component. It says that “This block has encountered an error and cannot be displayed”, however if I save and reload the proper amount of stars show.

Not sure what am missing and was wondering if you have any advice?

/**
* Block dependencies
*/
import icon from "./icon";
import "./style.scss";
/**
* Block libraries
*/
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { registerBlockType } = wp.blocks;
const {
	withColors,
	AlignmentToolbar,
	BlockControls,
	ContrastChecker,
	FontSizePicker,
	InspectorControls,
	PanelColorSettings,
	RichText,
	withFontSizes
} = wp.editor;
const { 
	PanelBody,
	PanelRow,
	ToggleControl,
	Toolbar,
	withFallbackStyles,
	RangeControl
} = wp.components;
/**
* Register Block
*/
export default registerBlockType("cmgschemareviews/star-rating", {
	title: __("Review Star Rating", "cmgschemareviews"),
	description: __("Choose the rating of this review.", "cmgschemareviews"),
	category: "cmgschemareviews",
	icon,
	keywords:[
		__("Star Rating", "cmgschemareviews"),
		__("Schema", "cmgschemareviews"),
	],
	supports:["full", "wide"],
	attributes: {
		stars: {
			type: 'number',
			default: 5,
		},
		alignment: {
			type: 'string',
			default: 'none',
		},
	},
	edit: props => {
		const {
			attributes: {
				stars,
				alignment,
			},
			setAttributes,
			setState,
			className,
		} = props;
		const build_stars = () => {
			var star_arr = [];
			for(let i = 0;i < stars; i++){
				star_arr.push(<i class="fa fa-star fa-2x" aria-hidden="true"></i>);
			}
			return star_arr;
		}

		return (
			<Fragment>
				<InspectorControls>
					<PanelBody
						title={ __("Star Settings", "cmgschemareviews") } 
						initialOpen={ true }
					>
						<PanelRow>
							<RangeControl
								label="How many stars?"
								value={ stars }
								onChange={ ( stars ) => setAttributes({ stars })}
								min={ 1 }
								max={ 5 }
							/>
						</PanelRow>
					</PanelBody>
				</InspectorControls>
		        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
		            <meta itemprop="ratingValue" content={stars} />
		        </div>
		        <div class="star-rating">
		        	{build_stars()}
		        </div>
			</Fragment>
		);
	},
	save: props => {
		const {
			attributes: {
				stars,
				alignment,
			},
			className,
		} = props;
		const build_stars = () => {
			var star_arr = [];
			for(let i = 0;i < stars; i++){
				star_arr.push(<i class="fa fa-star fa-2x" aria-hidden="true"></i>);
			}
			return star_arr;
		}
		return (
			<div class="review-rating">
		        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
		            <meta itemprop="ratingValue" content={stars} />
		        </div>
		        <div class="star-rating">
		        	{build_stars()}
		        </div>
	        </div>
		);
	}
});

[Author]

Posts