i want use custom hooks in react

Question

My problem is i create custom hook and link with my form hook tracing input text filed and update in state. I want after click on button submit input value in state with that custom hook and i am stuck here...


export const useForm = (initialValue) => {
    const [value, setValue] = useState(initialValue);
    return [value, e => 
    setValue({
        ...value, [e.target.name] : e.target.value
    })];
}

this is my custom hook

 <form onSubmit={updateCityName}>
            <div className="form">
                <div className="input-field">
                    <i className="material-icons prefix">location_on</i>
                    <input id="icon_prefix" type="text" name="cityName" value={value.cityName} onChange={handleChange} className="validate" />
                    <label htmlFor ="icon_prefix">City Name</label>
                </div>
                    <button className="btn waves-effect waves-light" type="submit" name="action">Submit</button>
            </div>
        </form>

this is my form and this is function

const updateCityName = e => {
    e.preventDefault();
    handleChange('what i must here type for update state???');
  }

Why do you want to update the state after submitting the form? — Rafael Lima
– Rafael Lima, Commented Aug 23, 2019 at 12:37

marcodt89 · Accepted Answer · 2019-08-23 12:44:02Z

1

You could do something like in this example: https://codesandbox.io/s/ecstatic-tree-2893r

You have the useForm to set and update form state. Then you have a second state for the submitted value.

I used 2 different states : first useForm to handle changes on inputs.

Then the 2nd state to keep submitted information, once the user clicked on the button. Of course in real scenario you will do something else with submitted info, like call a web service etc...

answered Aug 23, 2019 at 12:44

marcodt89

4112 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

i want use custom hooks in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related