Clear input form after submitting in React/Redux

Question

Need to implement basic feature of resetting input form after the data has been submitted, it looks roughly like this, whenever i want to update or delete a record, i want the input form to clear out, i tried with setting the setNewUsername back to " " but the redux state of new username get changed to " " as well.

this is the code

import "./App.css";
import {useRef, useState} from "react";
import { useSelector, useDispatch } from "react-redux";
import { addUser, deleteUser, updateUsername } from "./features/Users";

function App() {
  const dispatch = useDispatch();
  const userList = useSelector((state) => state.users.value);
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [newUsername, setNewUsername] = useState("");
  return (
    <div className="App">
      {""}
      <div className="addUser">
        <input
          type="text"
          placeholder="Name..."
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="text"
          placeholder="Username..."
          onChange={(e) => setUsername(e.target.value)}
        />
        <button
          onClick={() => {
            dispatch(
              addUser({
                id: userList[userList.length - 1].id + 1,
                name: name,
                username: username,
              })
            );
          }}
        >
          Add User
        </button>
      </div>
      <div className="displayUsers">
        {userList.map((user) => {
          return (
            <div>
              <h1>{user.name}</h1>
              <h1>{user.username}</h1>
              <input
                type="text"
                placeholder="New Username..."
                onChange={(e) => {
                  setNewUsername(e.target.value);
                }}
              />
              <button
                onClick={() => {
                  dispatch(
                    updateUsername({ id: user.id, username: newUsername })
                  );
                }}
              >
                Update Username
              </button>
              <button
                onClick={() => {
                  dispatch(deleteUser({ id: user.id }));
                }}
              >
                Delete User
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

and this is the redux code, using redux-toolkit

import { createSlice } from "@reduxjs/toolkit";
import { UsersData } from "../FakeData";

export const userSlice = createSlice({
  name: "users",
  initialState: { value: UsersData },
  reducers: {
    addUser: (state, action) => {
      state.value.push(action.payload);
    },
    deleteUser: (state, action) => {
      state.value = state.value.filter((user) => user.id !== action.payload.id);
    },
    updateUsername: (state, action) => {
      state.value.map((user) => {
        if (user.id === action.payload.id) {
          user.username = action.payload.username;
        }
      });
    },
  },
});

export const { addUser, deleteUser, updateUsername } = userSlice.actions;
export default userSlice.reducer;

Should i clear the input field using useRef? I never used it before, though.

Answer 1

You can have local state

const [clear, setClear] = useState()

state of input (redux or local state.. depends on app)

  const templateInput = useSelector(
    (state: RootState) => state.input.templateInput
  )

init inputRef

const inputRef = useRef() as React.MutableRefObject<HTMLTextAreaElement>

init inputVal

  let inputVal = inputRef.current

create clear function

  const handleClearInput = () => {
    dispatch(setTemplateInput(''))
    Val.value = ''
    setClear(true)
    setTimeout(() => {
      setClear(false)
    }, 1000)
  }

have function to clear along with the dispatch

const onUpdateUser = () => {
dispatch(addUser({
            id: userList[userList.length - 1].id + 1,
            name: name,
            username: username,
          }))
handleClearInput()
}

use that function in the button

  <button onClick={() => onUpdateUser()}> ... </>

may have forgotton some but p straight forward

Answer 2

After form submission you can reload your page.

Answer 3

You can simply add another state like

const [userinputval, setUserInputVal] = useState("")

And when you can set the value of input & usrname like this

 <input
          type="text"
          placeholder="Username..."
          value={userinputval}
          onChange={(e) => { setUserInputVal(e.target.value); 
                             setNewUsername(e.target.value) }
        />

And then calling the function through button to clear userinputval and calling dispatch function both;

        <button
          onClick={() => {
            setUserInputVal("");
            dispatch(
              addUser({
                id: userList[userList.length - 1].id + 1,
                name: name,
                username: username,
              })
            );
          
          }}
        >

Answer 4

After rephrasing my question to UWP from WinUI 3, a satisfactory answer resulted. The UISettings class provides the solution.

UISettings uiSettings = new UISettings();

uiSettings.ColorValuesChanged += ColorValuesChanged;

private void ColorValuesChanged(UISettings sender, object args)
{
  var accentColor = sender.GetColorValue(UIColorType.Accent);

  var backgroundColor = sender.GetColorValue(UIColorType.Background);
}

Thanks to Martin Zikmund for this solution: https://blog.mzikmund.com/2017/01/observing-system-color-changes-in-uwp-apps/