Add/delete old rows dynamically using hooks reactjs

Question

I am learning to use hooks with react and trying to make a simple website where you write 2 values and add them to a list. Each item in the list got a delete button.

For some reason, when I am adding more than 2 rows the problem seems to start. If I for example add 2 rows, and press delete on the old rows that got loaded on start - it is either deleting them or replacing them with same values as the new rows.

Not sure what I am doing wrong here since the delete works until I add more than +2 rows directly at the start.

Kinda hard to explain, but I've made a sandbox where it's easier to see the problem.

Delete & add functions:

  const deleteRow = async (index, e) => {
    var data = testArr;
    data.splice(index, 1);

    setTestArr([...data]);
  };

  const addRow = async e => {
    var obj = {
      id: 1,
      start: inputFrom,
      stop: inputTo
    };

    var data = testArr;
    data.push(obj);

    setTestArr([...data]);
  };

Mapping function:

{testArr.map((item, index) => (
        <div key={item.id} className="col-12">
          <div className="control-group mb-1">
            <span className="mr-2">
              {item.start} - {item.stop}
            </span>
            <input
              type="button"
              className="btn btn-light"
              value="Delete row"
              onClick={e => deleteRow(index, e)}
            />
          </div>
        </div>
      ))}

Sandbox:

Hagai Harari · Accepted Answer · 2020-06-23 12:38:29Z

3

first, you might not use var keyword and instead use ES const || let, for making sure you are not encountering unexpected side effects because of JS hoisting,

second -

var data = testArr;
data.splice(index, 1);

is illegal move, cause data isn't a different place in memory from the state, it is just a pointer on it, and therefore you modify state outside setState

the first option is to shallow copy state

let data = [...testArr];

or directly implement the logic inside setState

// delete
setTestArr(prev => prev.filter((item, i) => i != index ));
// add
setTestArr(prev => [...prev, obj]);

edited Jun 23, 2020 at 12:38

answered Jun 23, 2020 at 12:31

Hagai Harari

2,8673 gold badges14 silver badges27 bronze badges

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

Comments

Max · Accepted Answer · 2020-06-23 12:34:21Z

3

Try with these functions:

const deleteRow = async (index, e) => {
  var data = [...testArr];
  data.splice(index, 1);
  setTestArr(data);
};

and

const addRow = async e => {
  setTestArr([{
   id: 1,
   start: inputFrom,
   stop: inputTo
 },...testArr]);
};

I sugest you tu use useCallback t define these.

answered Jun 23, 2020 at 12:34

Max

1,0487 silver badges14 bronze badges

Comments

Peter · Accepted Answer · 2020-06-23 12:38:31Z

3

I would use this delete function:

  const deleteRow = (index, e) => {
    setTestArr(prev => {
      
      return prev.filter((e, i) => i !== index);
    });
  };

Instead of mutating the data, just filtering out, the index what we dont needed.

answered Jun 23, 2020 at 12:38

Peter

1,2599 silver badges16 bronze badges

Collectives™ on Stack Overflow

Add/delete old rows dynamically using hooks reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related