React not updating state with setState with Array of object

Question

I want to create this table shown in image below. When Click on edit button It should change to textfield and pressing on confirm button it should again transform to tr td tags.

here is my code for the same. I have created Array of objects in which i have id property, name property and value property. On edit button click, it should change to textfield and on confirm button click the value of textfield should update in array of objects.

import React, { useState } from "react";
import style from "./css/Register.module.css";
import { Table, Button, Icon, TextInput } from "react-materialize";

const ManipulateRegister = () => {
  const [RegisterData, setRegisterData] = useState([
    {
      id: 0,
      name: "W Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 1,
      name: "Z Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 2,
      name: "B Register",
      value: 0,
      isEdit: false,
    },
    {
      id: 3,
      name: "C Register",
      value: 0,
      isEdit: false,
    },
  ]);

  const handleRegisterEditBtn = (register) => {
    var datas = RegisterData;
    datas.forEach((data) => {
      if (data.id === register.id) {
        data.isEdit = true;
      }
    });
    console.log(datas);
    setRegisterData(datas);
  };

  return (
    <div className={style.addressWrapper}>
      <div className={style.addressTableWrapper}>
        <Table centered hoverable responsive striped>
          <thead className="orange lighten-2">
            <tr>
              <th data-field="Namee">Register Name</th>
              <th data-field="value">Value</th>
              <th data-field="action">Action</th>
            </tr>
          </thead>
          <tbody>
            {RegisterData.map((register) => (
              <tr>
                {register.isEdit ? (
                  <div>
                    <TextInput type="number" placeholder="Enter Value" />
                    <Button small waves style={{ margin: "20px" }}>
                      Submit
                    </Button>
                    <Button small waves className="red lighten-2">
                      Cancel
                    </Button>
                  </div>
                ) : (
                  <React.Fragment>
                    <td>{register.name}</td>
                    <td>{register.value}</td>
                    <td>
                      <Button
                        floating
                        icon={<Icon>edit</Icon>}
                        onClick={() => handleRegisterEditBtn(register)}
                      />
                    </td>
                  </React.Fragment>
                )}
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
      <Button node="button" className="red lighten-1" waves="light">
        Reset
      </Button>
    </div>
  );
};
export default ManipulateRegister;

Dennis Vash · Accepted Answer · 2021-04-29 16:15:07Z

20

You mutating the same reference, you need to render a copy or the component won't render (shallow comparison):

const handleRegisterEditBtn = (register) => {
  const datas = RegisterData.map((data) =>
    data.id === register.id ? { ...data, isEdit: true } : data
  );
  setRegisterData(datas);
};

Or just change to:

setRegisterData([...datas])

edited Apr 29, 2021 at 16:15

answered Apr 23, 2020 at 12:29

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

5 Comments

José Veríssimo Over a year ago

I don't understand why this happens even after doing a clone of the variable like: let metadataClone = testAssetMetadata; Any explanations as to why?

Dennis Vash Over a year ago

it is not a "clone" what you describe is an assignment, check if metadataClone === testAssetMetadata

José Veríssimo Over a year ago

Thank you, doing an object assign worked a charm. let metadataClone = Object.assign({}, testAssetMetadata)

Christopher Over a year ago

you made an error, should be "const datas" (forgot an "s") in your handleRegisterEditBtn

Dennis Vash Over a year ago

@Christopher fixed, notice that you can suggest an edit

Collectives™ on Stack Overflow

React not updating state with setState with Array of object

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related