Gutenberg Select Post - Duplicate Controls

block.js

/**
 * BLOCK: my-block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType, Editable, AlignmentToolbar, BlockControls, InspectorControls, Toolbar } = wp.blocks; // Import registerBlockType() from wp.blocks
const { SelectControl } = InspectorControls;
const { withAPIData, Component } = wp.element;

class mySelectPosts extends Component {
	static getInitialState() {
		return {
			posts: [],
			selectedPost: 2,
		};
	}

	constructor() {
		super( ...arguments );
		console.log( this.props );
		this.state = this.constructor.getInitialState();
		this.getOptions = this.getOptions.bind(this);
		this.onChangeSelectPost = this.onChangeSelectPost.bind(this);
		
	}

	getOptions() {
			return ( new wp.api.collections.Posts() ).fetch().then( ( posts ) => {
				this.setState({ posts });
			} );
	}

	componentDidMount() {
		this.setState( { selectedPost: this.props.attributes.selectedPost } );
		this.getOptions();
	}

	onChangeSelectPost( value ) {
		 
		this.props.setAttributes({selectedPost: parseInt( value ) })
		this.setState( { selectedPost: parseInt( value ) } );
	}

	render() {
		
		let output = 'Loading Posts...'; 
		let selectedPost = {};
		let options= [ { value: 0, label: 'Select a Post' } ];
		if( this.state.posts.length > 0 ) {
			output = 'We have ' + this.state.posts.length + ' posts';
			this.state.posts.forEach((post) => {
			  options.push({value:post.id, label:post.title.rendered});
			});
		}
		if( 0 === this.state.selectedPost ) {
			output = 'Please Select a Post';
		} else {
			output = 'A post is selected';
		}
		// focus is not available here, we need to use this.props.focus 
		return [
			!! this.props.focus && ( <InspectorControls key="inspector">
				<SelectControl onChange={this.onChangeSelectPost} value={ this.props.attributes.selectedPost } label={ __( 'Select a Post' ) } options={ options } />
			</InspectorControls>
			),
			output
		];
	}
}
/**
 * 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.
 *
 * @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-my-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'my-block - CGB Block', 'CGB' ), // Block title.
	icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'my-block — CGB Block' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],

	attributes: {
		content: {
			type: 'array',
			source: 'children',
			selector: 'p',
		},
		alignment: {
			type: 'string',
		},
		selectedPost: {
			type: 'number',
			default: 0,
			selector: 'div'
		}
	},

	// The "edit" property must be a valid function.
	edit: mySelectPosts,

	// The "save" property must be specified and must be a valid function.
	save: function( props ) {

		const { content, selectedPost } = props.attributes;
		console.log( selectedPost );
		return <div><p className={ props.className }>{ content }</p>{ selectedPost }</div>
	},
} );