Handle Function inside Hook function

Question

My hook function

 function useFormInput(initialValue){
   const [value, setValue] = useState(initialValue);
   function handleChange(e){
   setValue(e.target.value);
                           }
    return {
          value,
          onChange: handleChange
         };
    }

The way I called them independently inside a main function.

    const name = useFormInput('Aziyat');
    const rating = useFormInput('10');

As far as I understood, it automatically setValue when I declare them as name and rating(above code).

If I want to change the state of name and rating how do I do? Also, how can I use handleChange outside of the function?

Inder · Accepted Answer · 2022-11-02 15:26:38Z

3

From useFormInput() hook, you're returning an object {value,onChange} properties. You can simply destructure them like so

 const {value,onChange }= useFormInput('Aziyat');

// if useFormInput has to be used multiple times in same scope, you can do this way
// Now, to access rating, you will use rating const and to change rating you can use onChangeRating function

 const {value:rating,onChange:onChangeRating} = useFormInput('10');

edited Nov 2, 2022 at 15:26

answered May 1, 2022 at 9:17

Inder

2,1542 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark Ezberg Over a year ago

hey, thank you for your reply. Let's say I want to setValue of the name, and rating to ("") empty string after rendering them , how do I do that?

Inder Over a year ago

you can do that using useEffect. First, I want to know are you going to use state changer functions on an input or you're going to use them anywhere else too? I'll add the solution according to that @MarkEzberg

Mark Ezberg Over a year ago

I will use in input form. Would be great!

Inder Over a year ago

@MarkEzberg Check this CodeSandbox

Inder Over a year ago

oh ok. If you're calling onChange() function anywhere else, then I'd have done it another way. But for your use case this is best approach, @MarkEzberg

|

Collectives™ on Stack Overflow

Handle Function inside Hook function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest