0

I have an array of objects. The object contains two enteries I want to delete one entry and refresh the page with only one entry loading on the page. array the form looks like this The array looks like this and the data on my page looks like this. The functionality I want is if I click on any entry it deletes one entry only and refreshes with the remaining three entries. If I click one the other entries two three and four should be visible and one deleted

Currently, if I click on one entry to delete it deletes both entries from the current searched index if the id matches.

const [standup, setStandup] = useState({
    yesterday: {
      entry:"",
      id:""
    },
    today: {
      entry:"",
      id:""
    }
  });

 const [allStandups, setAllStandups] = useState([]);

checked here to delete only entries from yesterday but it is deleting the whole index both entries inside the id.

function deleteItem(id) {
    setAllStandups((prevStandup)=>{
      
      return prevStandup.filter((standup) => {
          return (standup.yesterday.id !== id;

      });
    })
  }

result I'm getting

Kashish
  • 11
  • 1
  • 2
    Can you clarify what your expected result is (in terms of your array/object structure) – Nick Parsons Nov 15 '22 at 10:00
  • If you fix the typo (missing `)`), what you have should work, and is covered by many previous questions [such as this one](https://stackoverflow.com/questions/29527385/removing-element-from-array-in-component-state). What specifically is wrong? – T.J. Crowder Nov 15 '22 at 10:04
  • 1
    Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) Please post code, error messages, markup, **data structures**, and other textual information **as text**, not just as a *picture* of text. Why: http://meta.stackoverflow.com/q/285551/157247 – T.J. Crowder Nov 15 '22 at 10:04
  • Hey @NickParsons I have updated the question with a GIF – Kashish Nov 15 '22 at 10:09
  • If you just want to *modify* one of the objects in state, that's covered by several previous questions as well, such as [this one](https://stackoverflow.com/questions/68799244/updating-object-in-array-hook-react-js). – T.J. Crowder Nov 15 '22 at 10:09
  • 1
    The gif doesn't seem to tell us anything useful. – T.J. Crowder Nov 15 '22 at 10:10
  • Where and how do you call `deleteItem`? – 3limin4t0r Nov 15 '22 at 10:11
  • I'm clicking on one entry from yesterday it should delete only that entry but it is also deleting the entry from today. @T.J.Crowder – Kashish Nov 15 '22 at 10:12
  • @Kashish thanks, but I'm trying to clarify what your new state should be if. Eg, if you start with something like `[{ yesterday: { entry: "a", id: "foo" }, today: { entry: "b", id: "bar" } }]`, do you expect a structure of `[{ yesterday: { entry: "a", id: "foo" }}]` if you remove the id of `bar`? Or some other object state? I would suggest potentially maintaining two state arrays for `today` and `yesterday` or refactoring to not keep `yesterday` and `today` together in the same object if you need to handle them independently. – Nick Parsons Nov 15 '22 at 10:14
  • @Kashish - That's covered [here](https://stackoverflow.com/questions/67858058/updating-complicated-object-with-usestate) (amongst other places). – T.J. Crowder Nov 15 '22 at 10:14
  • @NickParsons thanks for clarifying I was thinking of doing the same but then I thought I am repeating too much so I combined both in one array I'm new to react I think I tried doing too much from the start. – Kashish Nov 15 '22 at 10:17

2 Answers2

0

`function deleteItem(id) { setAllStandups((prevStandup)=>{

  return prevStandup.map((standup) => {
      if(standup.yesterday.id === id){
          return {...standup.today}
      }
    else{
    return {...standup.yesterday};
    }
  });
})

}`

this will delete only clicked value.

Manohar Seervi
  • 91
  • 1
  • 3
0

It is not array, It should be deleting the node from JSON Object.

 function deleteItem(NodeName,precStandup) {
        delete precStandup[NodeName];
        return precStandup; 
      }
    let result=deleteItem("yesterday",standup);
M Imran
  • 109
  • 7