diff --git a/packages/grafana-ui/src/components/OptionsUI/mappings.tsx b/packages/grafana-ui/src/components/OptionsUI/mappings.tsx
index 55a1a674be8..a84408efe25 100644
--- a/packages/grafana-ui/src/components/OptionsUI/mappings.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/mappings.tsx
@@ -17,6 +17,6 @@ export class ValueMappingsValueEditor extends React.PureComponent<
       value = [];
     }
 
-    return <ValueMappingsEditor valueMappings={value} onChange={onChange} />;
+    return <ValueMappingsEditor value={value} onChange={onChange} />;
   }
 }
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
index aa835f34b10..acc3e79fda3 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
@@ -7,8 +7,8 @@ import { MappingType, RangeMap, SelectableValue, ValueMap, ValueMapping } from '
 
 export interface Props {
   valueMapping: ValueMapping;
-  updateValueMapping: (valueMapping: ValueMapping) => void;
-  removeValueMapping: () => void;
+  onUpdate: (value: ValueMapping) => void;
+  onRemove: () => void;
 }
 
 const MAPPING_OPTIONS: Array<SelectableValue<MappingType>> = [
@@ -16,27 +16,27 @@ const MAPPING_OPTIONS: Array<SelectableValue<MappingType>> = [
   { value: MappingType.RangeToText, label: 'Range' },
 ];
 
-export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping, removeValueMapping }) => {
+export const MappingRow: React.FC<Props> = ({ valueMapping, onUpdate, onRemove }) => {
   const { type } = valueMapping;
 
   const onMappingValueChange = (value: string) => {
-    updateValueMapping({ ...valueMapping, value: value });
+    onUpdate({ ...valueMapping, value: value });
   };
 
   const onMappingFromChange = (value: string) => {
-    updateValueMapping({ ...valueMapping, from: value });
+    onUpdate({ ...valueMapping, from: value });
   };
 
   const onMappingToChange = (value: string) => {
-    updateValueMapping({ ...valueMapping, to: value });
+    onUpdate({ ...valueMapping, to: value });
   };
 
   const onMappingTextChange = (value: string) => {
-    updateValueMapping({ ...valueMapping, text: value });
+    onUpdate({ ...valueMapping, text: value });
   };
 
   const onMappingTypeChange = (mappingType: MappingType) => {
-    updateValueMapping({ ...valueMapping, type: mappingType });
+    onUpdate({ ...valueMapping, type: mappingType });
   };
 
   const onKeyDown = (handler: (value: string) => void) => (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -103,7 +103,7 @@ export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping,
   const label = (
     <HorizontalGroup justify="space-between" align="center">
       <Label>Mapping type</Label>
-      <IconButton name="times" onClick={removeValueMapping} aria-label="ValueMappingsEditor remove button" />
+      <IconButton name="times" onClick={onRemove} aria-label="ValueMappingsEditor remove button" />
     </HorizontalGroup>
   );
   return (
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
index e2a9e0140ad..dda84c86840 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
@@ -8,5 +8,5 @@ export default {
 };
 
 export const basic = () => {
-  return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;
+  return <ValueMappingsEditor value={[]} onChange={action('Mapping changed')} />;
 };
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
index 56bcf01153d..b3c23eb2c91 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
@@ -11,7 +11,7 @@ const setup = (spy?: any, propOverrides?: object) => {
         spy(mappings);
       }
     },
-    valueMappings: [
+    value: [
       { id: 1, type: MappingType.ValueToText, value: '20', text: 'Ok' },
       { id: 2, type: MappingType.RangeToText, from: '21', to: '30', text: 'Meh' },
     ],
@@ -64,11 +64,11 @@ describe('Next id to add', () => {
     ]);
   });
 
-  it('should default to 0', () => {
+  it('should default to id 1', () => {
     const onChangeSpy = jest.fn();
-    const wrapper = setup(onChangeSpy, { valueMappings: [] });
+    const wrapper = setup(onChangeSpy, { value: [] });
     const add = wrapper.find('*[aria-label="ValueMappingsEditor add mapping button"]');
     add.at(0).simulate('click');
-    expect(onChangeSpy).toBeCalledWith([{ id: 0, type: MappingType.ValueToText, from: '', to: '', text: '' }]);
+    expect(onChangeSpy).toBeCalledWith([{ id: 1, type: MappingType.ValueToText, from: '', to: '', text: '' }]);
   });
 });
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
index d1fc93f8217..85f2b90ca83 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
@@ -4,65 +4,48 @@ import { Button } from '../Button/Button';
 import { MappingRow } from './MappingRow';
 
 export interface Props {
-  valueMappings?: ValueMapping[];
+  value: ValueMapping[];
   onChange: (valueMappings: ValueMapping[]) => void;
 }
 
-export const ValueMappingsEditor: React.FC<Props> = ({ valueMappings, onChange, children }) => {
+export const ValueMappingsEditor: React.FC<Props> = ({ value, onChange, children }) => {
   const onAdd = () => {
-    let update = valueMappings;
     const defaultMapping = {
       type: MappingType.ValueToText,
       from: '',
       to: '',
       text: '',
     };
-    const id = update && update.length > 0 ? Math.max(...update.map(v => v.id)) + 1 : 0;
 
-    if (update) {
-      update.push({
+    const id = Math.max(...value.map(v => v.id), 0) + 1;
+
+    onChange([
+      ...value,
+      {
         id,
         ...defaultMapping,
-      });
-    } else {
-      update = [
-        {
-          id,
-          ...defaultMapping,
-        },
-      ];
-    }
-
-    onChange(update);
+      },
+    ]);
   };
 
   const onRemove = (index: number) => {
-    const update = valueMappings;
-    update!.splice(index, 1);
-    onChange(update!);
+    onChange(value.filter((_, i) => i !== index));
   };
 
-  const onMappingChange = (index: number, value: ValueMapping) => {
-    const update = valueMappings;
-    update![index] = value;
-    onChange(update!);
+  const onMappingChange = (update: ValueMapping) => {
+    onChange(value.map(item => (item.id === update.id ? update : item)));
   };
 
   return (
     <>
-      {valueMappings && valueMappings.length > 0 && (
-        <>
-          {valueMappings.length > 0 &&
-            valueMappings.map((valueMapping, index) => (
-              <MappingRow
-                key={`${valueMapping.text}-${index}`}
-                valueMapping={valueMapping}
-                updateValueMapping={value => onMappingChange(index, value)}
-                removeValueMapping={() => onRemove(index)}
-              />
-            ))}
-        </>
-      )}
+      {value.map((valueMapping, index) => (
+        <MappingRow
+          key={`${valueMapping.text}-${index}`}
+          valueMapping={valueMapping}
+          onUpdate={onMappingChange}
+          onRemove={() => onRemove(index)}
+        />
+      ))}
       <Button
         size="sm"
         icon="plus"