Splice an array in react keeps removing the first element

Question

Working on my todo app, when I want to remove an element from an array, it keeps removing the first element all the time... I cant find why.

Any ideas? I copy the bit of code that is linked to my remove function !

THANK YOU!

function App () {

  const [activities, setActivities] = useState([]);
  const [color, setColor] = useState ('Black');
  const [complete, setComplete] = useState([]);
 

  //ADD NEW ACTIVITY

  /* activities*/

  function addActivity (data) {
    let newActivity = { data, done:false, isMotivating: false, id: sum , color: 'Black' }
    sum++;
    setActivities((activities) => [ ...activities, newActivity])
    //console.log(`App: ${JSON.stringify(data)}`)
      };
    


  function toggleColor (a)  {
    setColor ('')
    activities[a.id].isMotivating =  activities[a.id].isMotivating ? false : true

        if (activities[a.id].isMotivating === false) {
        setColor ('green')
        activities[a.id].color = color
    } else {
        setColor ('red')
        activities[a.id].color = color
    }
        console.log(activities[a.id])
        return activities;
    } 

    function removeTodo (id ) {
      const newTodos = [...activities];
      newTodos.splice(id, 1);
      setActivities(newTodos);
    };
}

Answer 1

Your sum seems to be declared via let/var which will be initialized to 0 on each re-render so each of your id is probably set to 0.

You can instead use useRef like so :-

const uuid = useRef(0);

Inside addActivity

function addActivity (data) {
    let newActivity = { data, done:false, isMotivating: false, id:uuid.current , color: 'Black' }
    uuid.current++;
    setActivities((activities) => [ ...activities, newActivity])
    //console.log(`App: ${JSON.stringify(data)}`)
      };

But not sure if using id as index to splice is best way to go here since you're always removing stuff, your array length will change.