Breaking News: Grepper is joining You.com. Read the official announcement!

react useForm hook

Tender Turtle answered on March 8, 2023 Popularity 10/10 Helpfulness 2/10

answer react useForm hook

react useForm hook

Comment

// Note: Its a custom hook for my own usage:
// use it on your own responsibility 

// Hook:
const useForm = (getter, setter) => {
    return (e) => {
        if (e.target.type === "file") {
            e.target.multiple
                ? setter({ ...getter, [e.target.name]: e.target.files })
                : setter({ ...getter, [e.target.name]: e.target.files[0] });
        } else {
            setter({ ...getter, [e.target.name]: e.target.value });
        }
    };
};

export default useForm;

// Usage: In React Component
const [data, setData] = useState({
    file: null,
    multipleFiles: null,
    text: "",
});
const formHandler = useForm(userData, setuserData);

// Now the inputs:
<input
    type="text"
    name="text" // <- name of the field in which you want to store this input's data (data.text in this example)
    onChange={formHandler} // <- just add this 
/>
<input
    type="file"
    name="file"
    onChange={formHandler}
/>
// For multiple files, just add multiple attribute
<input
    type="file"
    name="multipleFiles"
    onChange={formHandler}
    multiple
/>
// Hope you find it useful,
// any suggestions are welcomed

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: hook javascript use-form

Link to this answer
Share Copy Link

Contributed on Mar 08 2023

Tender Turtle

0 Answers Avg Quality 2/10

react useForm hook

Contents

More Related Answers

react useForm hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.