component does not load in block.js

[nabi009]

`
/**

• BLOCK: nh-blocks
• Registering a basic block with Gutenberg.
• Simple block, renders and saves the same content without any interactivity.
  */
  import { categories } from '../components/categories';
  // Import CSS.
  // import './editor.scss';
  // import './style.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { PlainText, RichText, InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const { TextControl, ToggleControl, Panel, PanelBody, PanelRow, SelectControl, Dropdown, Button, CheckboxControl } = wp.components;
/**

• Register: aa Gutenberg Block.
• Registers a new block provided a unique name and an object defining its
• behavior. Once registered, the block is made editor as an option to any
• editor interface where blocks are implemented.
• @link https://wordpress.org/gutenberg/handbook/block-api/
• @param {string} name Block name.
• @param {Object} settings Block settings.
• @return {?WPBlock} The block, if it has been successfully

•                         registered; otherwise `undefined`.
  

*/
registerBlockType( 'cgb/block-nh-blocks', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'nh-blocks - Latest Block' ), // Block title.
icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'text', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'nh-blocks — Post Block' ),
__( 'Posts by Category' ),
__( 'create-guten-block' ),
],

attributes: {
	categories: {
		type: 'array' },
	selectCategory: { type: 'string' },

},
/**
 * The edit function describes the structure of your block in the context of the editor.
 * This represents what the editor will render when the block is used.
 *
 * The "edit" property must be a valid function.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
 *
 * @param {Object} props Props.
 * @returns {Mixed} JSX Component.
 */
edit: ( props ) => {
	// Creates a <p class='wp-block-cgb-block-nh-blocks'></p>.
	if ( ! props.attributes.categories ) {
		wp.apiFetch( {
			url: '/wp-json/wp/v2/categories',
		} ).then( categories => {
			props.setAttributes( { categories: categories } );
		} );
	}
	console.log( props.attributes.categories );

	return (

		<InspectorControls>
			<PanelBody>

				<PanelRow>
					<label>Set Filter</label>

				</PanelRow>
				<PanelRow>
					<categories />
				</PanelRow>
			</PanelBody>
		</InspectorControls>

	);
},

/**
 * The save function defines the way in which the different attributes should be combined
 * into the final markup, which is then serialized by Gutenberg into post_content.
 *
 * The "save" property must be specified and must be a valid function.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
 *
 * @param {Object} props Props.
 * @returns {Mixed} JSX Frontend HTML.
 */
save: ( { className, attributes, setAttributes } ) => {
	return null;
},

} );

`

`

const { Component } = wp.element;

export class categories extends Component {
constructor( props ) {
super( ...arguments );
this.props = props;
}

render() {
	return (
		<p>categories label</p>

	);
}

}

`