From 1e173afc9559c19a142aa1026545ded58ee98465 Mon Sep 17 00:00:00 2001
From: Sailer43 <30441791+Sailer43@users.noreply.github.com>
Date: Tue, 6 Dec 2022 11:48:55 -0500
Subject: [PATCH] Fixed NumericInput Storybook Components (#16734) (#16737)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Fixed https://github.com/MetaMask/metamask-extension/issues/16703
Fixes https://github.com/MetaMask/metamask-extension/issues/16703
---
 .../ui/numeric-input/numeric-input.stories.js      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/components/ui/numeric-input/numeric-input.stories.js b/ui/components/ui/numeric-input/numeric-input.stories.js
index 79e241d69..211eb4b58 100644
--- a/ui/components/ui/numeric-input/numeric-input.stories.js
+++ b/ui/components/ui/numeric-input/numeric-input.stories.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import NumericInput from '.';
 
 export default {
@@ -6,12 +6,11 @@ export default {
   id: __filename,
 };
 
-const onChange = (e) => console.log('changed value: ', e.target.value);
-
 export const DefaultStory = () => {
+  const [value, setValue] = useState(0);
   return (
     <div style={{ width: '600px' }}>
-      <NumericInput onChange={onChange} />
+      <NumericInput onChange={setValue} value={value} />
     </div>
   );
 };
@@ -19,20 +18,23 @@ export const DefaultStory = () => {
 DefaultStory.storyName = 'Default';
 
 export const WithDetail = () => {
+  const [value, setValue] = useState(0);
   return (
     <div style={{ width: '600px' }}>
-      <NumericInput detailText="= $0.06" onChange={onChange} />
+      <NumericInput detailText="= $0.06" onChange={setValue} value={value} />
     </div>
   );
 };
 
 export const WithError = () => {
+  const [value, setValue] = useState(0);
   return (
     <div style={{ width: '600px' }}>
       <NumericInput
         detailText="= $0.06"
         error="This number isn't great"
-        onChange={onChange}
+        onChange={setValue}
+        value={value}
       />
     </div>
   );