How to make functions that change the state via useState hook reusable?

user_511659 0
Viewed 2638

Let’s say I have the following code for changing the input values and it updates the state of the component: 

const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
  };

However, since I have different components using this same function, I’d like to make it an exportable utility function. But then it has the “setInput” function call coming from useState hook.

Should I just pass the setInput as a parameter to every handleInputChange() call like:

onChange={e => handleInputChange(e, setInput)}

Or is there a better way of handling this?

reusability react-hooks reactjs javascript
2 Answers

If you are creating a custom hook, you can just call other hooks in there. So you could just retrieve setInput within the hook instead of passing it in there:


const useCustomHook = (initialValue) => {

  const [input, setInput] = useState(initialValue);

  // ...

  const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
  };

  return handleInputChange;
}

This input would be bound to the state of the component, which is calling useCustomHook.

EDIT:

Combining @Shota's answer with this one, you could create a component using the useState hook to handle the state internally aswell: 


const CustomInput(initialState) => {

  const [input, setInput] = useState(initialValue);

  const handleInputChange = e => {
    // ...
    setInput(nextState);
  };

  return (<input type="text" onChange={handleInputChange} />);
}

To use input in the outside world just return it from the hook:


useCustomHook = () => {
  // ...
  return {
    handleInputChange,
    input
  }
}
user_19050150

You can create a brand new reusable component with the on change function prop.

import React from 'react';

const CommonInput = ({handleChange}) => {

  const handleInputChange = e => {
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;

    // some other code

    setInput(nextState);
    handleChange(nextState);
  };

  return (<input type="text" onChange={handleInputChange} />);
}

export default CommonInput;

And we can reuse it anywhere we want:

import React from 'react';

const Parent = (props) => (
  <CommonInput handleChange={nextStateData => {}}/>
  );

export default Parent;

Generally, I would prefer creating a new component with some functionality inside than reusing just functions.

user_37794190
Related