Isa Chen isabellachen

Update the version from latest to beta version.

npm uninstall react-simple-maps
npm i -S npm i @types/react-simple-maps

Dont't forget to update types!

npm uninstall @types/react-simple-maps

When dealing with return data from React events, you might need to cast the data back to the original.

<InputMultiSelect
  value={chosenDataStorageUnit.map(f => f.value)}
/>

Create or add fonts

Import selection.json file into icomoon app.
Import the new svg icon.
Export as font.
Unpack and add all the selection.json, .eot, .svg, .ttf and .woff files to the project, replacing the existing files if there are any.

Look for the _icon.scss partial file
You can register the unicode as a variable and use it, or add it directly to the css.

Chucks out interactive webpages. Kinda like the Webpack server. Both environments are on Repl.it and come with basic examples, check it out.

Like the JavaScript console in DevTools.

PHP requires each statement to be terminated with a semi-colon.

	declare module 'react-metismenu' {
	const mentisMenu: any;
	export default mentisMenu;
	}

	declare module 'wsdm-tooltip' {
	const wsdmTooltip: any;
	export default wsdmTooltip;
	}

	<div class="flex-parent has-child">

	<div class="flex-child long-and-truncated-with-child-corrected">
	<h2>3. This is a long string that is OK to truncate please and thank you</h2>
	</div>

	<div class="flex-child short-and-fixed">
	<div></div>
	<div></div>
	<div></div>

	// With Bootstrap
	const onPageNameChange = (e: React.FormEvent<FormControl & FormControlProps>) => {
	const value = (e.target as HTMLInputElement).value;
	updatePageName(value);
	};

	const onDataSourceChange = (e: React.FormEvent<FormControl & FormControlProps>) => {
	const value = (e.target as HTMLSelectElement).value;
	updateChosenDataSource(value);
	};

	import { WithTranslation, withTranslation, useTranslation } from 'react-i18next';
	import { RouteComponentProps, withRouter } from 'react-router-dom';

	export type MyDemoProps = {} & RouteComponentProps & WithTranslation;

	function MyDemoComponent({
	history,
	t,
	}: MyDemoProps) {
	const [t] = useTranslation(); //alternatively, import translation function directly into component

	import { cid, useInject } from 'inversify-hooks';
	import React, { Suspense, useEffect } from 'react';
	import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
	import { exampleModule } from './example';
	import { IHttpService } from './shared';
	import { styleGuideModule } from './style-guide';

	let didTheUserNavigatedForTheFirstTime = false;
	export default function AppRouter() {
	const history = useHistory();

	/Flexbox should be the answer. But this is for those times flexbox does not suit your needs/

	.graphic-wrapper {
	position: relative;
	}

	.graphic {
	position: absolute;
	top: 50%;
	left: 50%;