When I remove an item from a array, how to change the status to deleted?-CodePudding

When the user adds a value to an object that is inside an array the status is updated to added. I'm trying to do the same thing when that value is deleted, to update the status to deleted.

const initialName = [
  {
    name: "",
    status: "",
  },
];

export default function changeNames(){

  const [name, setName] = useState([initialName ]);

  const handleAdd = () => {
    setName([...name, ""]);
  };
  const handleItemChanged = (event, index) => {
    const value = event.target.value;
    const list = [...name];

    list[index] = { name: value   "-"   id, status: "added" };
    setName(list);
  };
...
}

So when I add an input field and type the name, the array looks like this:

[{…}]
0:
name: "John-id"
status: "added"

When I remove John from the array, I want smth like this:

[{…}]
0:
name: "John-id"
status: "deleted"

This is the remove function

  const handleRemoveClick = (index) => {
    const list = [...name];
    list.splice(index, 1);
    setName(list);
  };

    <div>
      {name.map((o, i) => {
        return (
          <tr key={"item-"   i}>
            <td>
              <div>
                <input
                  type="text"
                  value={o.item}
                  onChange={(event) => handleItemChanged(event, i)}
                  placeholder="Name it"
                />
              </div>
            </td>
            <td>
              <button type="button" onClick={handleRemoveClick}>
                Delete
              </button>
            </td>
          </tr>
        );
      })}
      <div>
        <button Click={handleAddClick}>
          Add Language
        </button>
      </div>
    </div>
  );

How can I make it work?

CodePudding user response：

I think this might help you.thank you

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

export default function App() {
   const [Name, setName] = useState([]);
   const [input, setInput] = useState({ name: "", status: "" });
   const handleItemChanged = (event, index) => {
     const { value } = event.target;
     setInput({ name: value   "-id", status: "added" });
   };
   const addHandler = () => {
     setName((prev) => {
       return [...prev, input];
     });
   };
   const removeHandler = (i) => {
     const arr = [...Name];
     arr[i].status = "deleted";
     setName(arr);
   };

   return (
     <div className="App">
       <input type="text" name="name" onChange={(e) =>
handleItemChanged(e)} />
       <button onClick={addHandler} style={{ margin: "1rem" }}>
         Add
       </button>
       <div>
         {Name &&
           Name.map((data, i) => {
             return (
               <div key={i}>
                 <h3>
                   {data.name} {data.status}
                   <button
                     style={{ margin: "1rem" }}
                     onClick={() => removeHandler(i)}
                   >
                     Delete
                   </button>
                 </h3>
               </div>
             );
           })}
       </div>
     </div>
   );
}

CodePudding user response：

You need to change the "status" property, because there is no way of removing item and setting its property.

const handleRemoveClick = (event, index) => {
    const list = [...name];
    list[index].status = "deleted";
    setName(list);
};

And later while rendering you have to either perform a check in map function (not really elegant), or first filter your array and then map it:

// first, not elegant in my opinion
...    
{name.map(item => item.status !== "deleted" ? <div>item.name</div> : null)}
// second approach
...
{name.filter(item => item.status !== "deleted").map(item => <div>item.name</div>)}