Skip to content

Instantly share code, notes, and snippets.

@deepakkashyap3013

deepakkashyap3013/editableForm.js

Last active September 1, 2023 16:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save deepakkashyap3013/d4861c706e844a09025f4a47f7bf38af to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save deepakkashyap3013/d4861c706e844a09025f4a47f7bf38af to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. deepakkashyap3013 renamed this gist Sep 1, 2023. 1 changed file with 0 additions and 0 deletions.
    0 editableForm.jsx → editableForm.js
    View file
    File renamed without changes.
  2. deepakkashyap3013 created this gist Sep 1, 2023.
    40 changes: 40 additions & 0 deletions editableForm.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    import React from "react";
    import { withEditableUser } from "./withEditableUser";

    // component to be passed as argument to HOC
    const FormComponent = ({ user, onChangeUser, onSaveUser, onResetUser }) => {
    const { name, age, hairColor } = user || {};

    return user ? (
    <>
    <label>
    Name:
    <input
    value={name}
    onChange={(e) => onChangeUser({ name: e.target.value })}
    />
    </label>
    <label>
    Age:
    <input
    value={age}
    onChange={(e) => onChangeUser({ age: Number(e.target.value) })}
    />
    </label>
    <label>
    Hair Color:
    <input
    value={hairColor}
    onChange={(e) => onChangeUser({ hairColor: e.target.value })}
    />
    </label>
    <button onClick={onResetUser}>Reset</button>
    <button onClick={onSaveUser}>Save</button>
    </>
    ) : (
    <p>Loading...</p>
    );
    };

    // wrapper to get the userId controllable by the parent component using it
    export const editableForm = (userId) => withEditableUser(FormComponent, userId);