Using base state with hooks in React

Question

Referenced to resetting a form with baseState in React component.

I am using Hooks (useState etc.) in my React component that returns a form. Is there any way to use this.baseState to reset the input values when we use Hooks?

PS.
Please check the code snippet below. I want to reset the form (set base state) when the user clicks on the Cancel button.

CODE:

import React, { useState } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';

const TasksTemplateEditForm = ({
  handleFormResetOnCancel,
  handleFormSubmit
}) => {
  const [name, setName] = useState("default value");
  const [description, setDescription] = useState("default value");
  const [is_general, setIsGeneral] = useState("default value");

  return (
    <form>
      <div>
        <label>Template Name</label>
        <input
          type="text"
          name="name"
          onChange={e => setName(e.target.value)}
          value={name}
        />
      </div>
      <div className="form-group">
        <label>Description</label>
        <textarea
          name="description"
          onChange={e => setDescription(e.target.value)}
          value={description}
        ></textarea>
      </div>

      <button onClick={() => handleFormResetOnCancel()} >CANCEL</button>

      <button onClick={() => handleFormSubmit()} >UPDATE CHANGES</button>
    </form>
  );
};

Set the state back to the `baseState`? Can you share an actual component code snippet if what you've tried, explain what isn't working? — Drew Reese, Feb 26 '20 at 05:03
Are you using any form libraries? If you aren't, then just store initial values in a object somewhere, pass that in when you `useState`, and again when you reset it — Jayce444, Feb 26 '20 at 05:05
@DrewReese Thanks for the comment. I have updated the question with my code. @Jayce444 I can simply extend React.Component class instead of using the functional component. And then I can use `baseState` inside it. Your suggestion is not a good practice. Thanks. — Charith H, Feb 26 '20 at 05:15
You don't use any of that component state. If you pass a prop value in (i.e. `name="test name"`) then your form input doesn't allow it to changed. What are you trying to achieve here? — Drew Reese, Feb 26 '20 at 05:34
@DrewReese My code snippet was misleading since I used props. I have updated the code. I use the component state (name, description, etc.). I hope there should be a way to call `this.baseState` when we don't extend `React.Component` class. — Charith H, Feb 26 '20 at 07:33
What do `handleFormResetOnCancel`, and `handleFormSubmit` do? What if your buttons were semantic form buttons (i.e. `type="submit"` and `type="reset"`)? Pass `baseState` as a prop and initialize your form fields to it? — Drew Reese, Feb 26 '20 at 07:38

score 0 · Answer 1 · answered Feb 26 '20 at 05:26

From what I understand from your code, your base state is coming as props(possibly a state of a parent component). You can write a resetForm function and invoke that on cancel click like this.

const TasksTemplateEditForm = ({
  name,
  description,
  is_general,
  toggleTitleEditable,
  handleSubmit
}) => {
  const [_name, setName] = useState(name);
  const [_description, setDescription] = useState(description);
  const [_is_general, setIsGeneral] = useState(is_general);
  const resetForm = () => {
    setName(name);
    setDescription(description);
    setIsGeneral(is_general); 
  }

Using base state with hooks in React

1 Answers1