fix: react form examples

glorious-codes · Jan 20, 2021 · 28e314b · 28e314b
1 parent bc4adb4
commit 28e314b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 21 deletions.
diff --git a/src/scripts/react/components/form/form.doc.js b/src/scripts/react/components/form/form.doc.js
@@ -42,7 +42,7 @@ module.exports = {
           const initialData = { name: '', email: '', message: '' };
           const [data, setData] = useState(initialData);
 
-          const onDataChange = ({ name, value }) => {
+          const onDataChange = ({ target: { name, value } }) => {
             setData({...data, [name]: value});
           };
 
@@ -111,10 +111,8 @@ module.exports = {
         return function(){
           const [data, setData] = useState({});
 
-          const onDataChange = ({ name, value }) => {
-            setData(prevState => {
-              return Object.assign(prevState, { [name]: value });
-            });
+          const onDataChange = ({ target: { name, value } }) => {
+            setData({...data, [name]: value});
           };
 
           const onSubmit = () => {

diff --git a/src/scripts/react/components/input/input.doc.js b/src/scripts/react/components/input/input.doc.js
@@ -45,7 +45,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <>
@@ -73,7 +73,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('Pitsby');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <>
@@ -101,7 +101,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
           const onSubmit = evt => {
             evt.preventDefault();
             setValue('');
@@ -135,7 +135,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <Row>

diff --git a/src/scripts/react/components/textarea/textarea.doc.js b/src/scripts/react/components/textarea/textarea.doc.js
@@ -35,7 +35,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <>
@@ -63,7 +63,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('Pitsby');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <>
@@ -91,7 +91,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
           const onSubmit = evt => {
             evt.preventDefault();
             setValue('');
@@ -127,7 +127,7 @@ module.exports = {
         return function(){
           const [value, setValue] = useState('');
 
-          const onChange = ({ value }) => setValue(value);
+          const onChange = ({ target: { value } }) => setValue(value);
 
           return (
             <Row>

diff --git a/src/scripts/react/components/textarea/textarea.js b/src/scripts/react/components/textarea/textarea.js
@@ -8,11 +8,6 @@ export const Textarea = ({ name, value, disabled, required, onChange }) => {
       className="pd-textarea"
       disabled={ disabled }
       required={ required }
-      onChange={ evt => onTextareaChange(evt, onChange) } />
+      onChange={ onChange } />
   );
 };
-
-function onTextareaChange({ target }, onChange){
-  const { value, name } = target;
-  return onChange({ name, value });
-}
diff --git a/src/scripts/react/components/textarea/textarea.test.js b/src/scripts/react/components/textarea/textarea.test.js
@@ -56,7 +56,6 @@ describe('Textarea', () => {
     const onChange = jest.fn();
     const wrapper = mount({ onChange });
     wrapper.simulate('change', evtMock);
-    const { name, value } = evtMock.target;
-    expect(onChange).toHaveBeenCalledWith({ name, value });
+    expect(onChange).toHaveBeenCalledWith(evtMock);
   });
 });