CODEWITHSUNDEEP
reactjs
user18056776
user18056776

Reputation:

My delete button deletes all of the items stored in my array instead of one item. ReactJS

Here is my App.js

import React, { useState } from "react";
import Input from "./components/Input";

function App() {
  const [newRow, setNewRow] = useState([]);

  const addRow = (event) => {
    event.preventDefault();
    setNewRow(
      newRow.concat(
        <Input
          key={newRow.length}
          myKey={newRow.length}
          deleteRow={deleteRow}
        />
      )
    );
  };
  const deleteRow = (key) => {
    setNewRow(newRow.filter(input => input.key !== key));
    // console.log(newRow);
   }

  return (
    <div>
      <h3>React calculator</h3>
      <button onClick={addRow}>Add row</button>
      <ul>
        {newRow}
      </ul>
    </div>
  );
}

export default App;

and this is my Input.js

import "./Input.css";
import React, { useState, useRef } from "react";

const Input = (props) => {
    const inputRef = useRef();

    const [numbers, setNumbers] = useState();
    const disableRow = () => {
        inputRef.current.disabled = 'true';
    }
    const calculator = () => {
        var inputValue = inputRef.current.value;
        setNumbers(inputValue);
    }
  return (
    <li className="item">
      <select>
        <option value="+" ref={addition}>+</option>
        <option value="-" ref={subtraction}>-</option>
      </select>
      <input type="number" ref={inputRef} onChange={calculator}/>
      <button onClick={()=>props.deleteRow(props.myKey)}>Delete</button>
      <button onClick={disableRow}>Disable</button>
      {numbers}
    </li>
    
  );
};

export default Input;

I'm trying to remove the input element when I click on the delete button and it works if I delete the items from bottom to top. However, when I add three rows and click delete on the second row, it deletes the second and the third inputs. I tried splice(key,1) but it deletes all of my items. Is my filter function correct?

Upvotes: 0

Views: 337

Answers (1)

Mateusz
Mateusz

Reputation: 97

did you try to console.log(newRow) before filter to check if you have duplicate keys? Using myKey={newRow.length} is wrong here you need key to be unique but lets say you delete a row and then add another. You will get duplicate keys. Same thing will happen if you add rows very fast. The state wont have time to update and you get the same length every click. Try using something else as a key. Also you should use spread operator instead of concat. Read about state immutability

Edit: To generate a key you can try to use nanoid: https://www.npmjs.com/package/nanoid

Upvotes: 1

Related Questions