ReactJS re-render does not reset input fields

Question

Building input elements into a table and loading the elements with data ala a CRUD grid. It was my understanding that when a react state signals a re-render of the page that all the elements are re-rendered. In my test case, I am using defaultValue to give the inputs their data value; however when the state changes (ie I reorder the array) the values do not change for the inputs.

Code SandBox TestCase

Note that when you click a Move Up Button the actual array is reordered but not reflected in the grid.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [gridData, setGridData] = useState([
    { recordid: 1, companyname: "Devshare", contactname: "Joeann Rechert" },
    { recordid: 2, companyname: "Shufflebeat", contactname: "Lazare Kubiczek" },
    { recordid: 3, companyname: "Mita", contactname: "Jordain Copyn" }
  ]);

  const moveRecordUp = (e) => {
    e = e.target || e;
    let row = parseInt(e.getAttribute("data-row"));
    let nGridData = gridData;
    let holdRow = nGridData[row];
    nGridData.splice(row, 1);
    nGridData.splice(row - 1, 0, holdRow);
    setGridData([...nGridData]);
  };

  console.log(gridData);

  return (
    <div className="App">
      {gridData.map((r, rndx) => {
        return (
          <div key={rndx} style={{ display: "flex" }}>
            <input defaultValue={r.companyname} value={r.companyname} />
            <input defaultValue={r.contactname} />
            {rndx > 0 && (
              <button data-row={rndx} onClick={moveRecordUp}>
                Move Up
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}

Please also add the relevant code here. It makes it easier for whoever looks at the question to understand what you are trying to achieve. — Cornel Raiu
– Cornel Raiu, Commented Jan 5, 2022 at 14:23

Sonam Gupta · Accepted Answer · 2022-01-05 17:45:28Z

As answered previously , the issue is occuring because you need to use the value prop in both the input elements for the changes to reflect. And for your concern of making the input editable onChange prop is required . You can try using this approach :-


  const handleChange = (e: any, rndx: number, changingVariable: string) => {
    const value = { ...gridData[rndx], [changingVariable]: e.target.value }
    const arr = [...gridData]
    arr[rndx] = value
    setGridData(arr)
  }

            <input
              defaultValue={r.companyname}
              value={r.companyname}
              onChange={(e) => {
                handleChange(e, rndx, 'companyname')
              }}
            />
            <input
              defaultValue={r.contactname}
              value={r.contactname}
              onChange={(e) => {
                handleChange(e, rndx, 'contactname')
              }}
            />

iLuvLogix · Accepted Answer · 2022-01-05 14:32:10Z

0

The reason for your issue is that defaultValue sets only the initial value of the input. You should set the value of the input to r.companyName as well:

<input defaultValue={r.companyname} value={r.companyname}/>
<input defaultValue={r.contactname} value={r.contactname}/>

edited Jan 5, 2022 at 14:32

iLuvLogix

6,4783 gold badges30 silver badges45 bronze badges

answered Jan 5, 2022 at 14:26

Claeusdev

5033 silver badges12 bronze badges

3 Comments

Cornel Raiu Over a year ago

on the 2nd line you should have value={r.contactname}

Elcid_91 Over a year ago

Yes; however, I don't want the input to be controlled. Putting the "value" attribute in the input does not allow me to type in the field.

Claeusdev Over a year ago

hmm.. that's interesting. You may be able to update the DOM with a useEffect because it seems like the gridData actually changes behind the scenes.

Collectives™ on Stack Overflow

ReactJS re-render does not reset input fields

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related