Usunięcie elementu z tablicy {JS}

Question

Mam funkcje która usuwa object{note.id,body:"text"} z tablicy 

Mam dwa sposoby, żaden nie działa pierwszy, wszystkie usuwa elementy, oprócz pierwszego 
 

function deleteNote(index) {
		setNotes((newNotes) => {
			return newNotes.filter((note) => {
				return note.id === index;
			});
		});
	}

drugi  z błedem Each child in a list should have a unique "key" prop

function deleteNote(index) {
		setNotes((newNotes) => {
			return newNotes.map((note) => {
				return note.id === index ? newNotes.splice(index, 1) : note;
			});
		});
	}

funkcja jest przesyłana jako prop 

<Example delete={deleteNote} />

i w componencie jest przycisk 

	<button key={note.id + 20} onClick={() => props.delete(note.id)}>
					delete
				</button>

 

Answer 1

 setNotes((newNotes) => {
            return newNotes.filter((note) => {
                return note.id === index;
            });
        });

filtrujesz tablice wszystkich twoich elementów i sprawdzasz czy index = id, więc podejrzewam, że skoro przechodzisz przez każdego - > to na pewno twoje ID są większe od 0 ( a index jest liczony od 0) więc pierwszy się usuwa, natomiast kolejne elementy mają id 1.... n ( n- liczba elementów), więc pewnie i na takich indeksach bedą ... stąd fitler zwraca Ci pozostałe elementy. 

Natomiast druga sprawa robisz 

key={note.id + 20} 

nie jest unikalne, czyli występuje tutaj kilka takich samych kluczy

Twoje wiersze w tablicy JS powinny mieć unikalną wartość KEY- klucza. Pomoże to ReactJS znaleźć odniesienia do odpowiednich węzłów DOM i zaktualizować tylko zawartość która jest wewnątrz znaczników. 

W drugim przypadku dalej zwracasz kilka elementów przez to , żę note.id === index nie jest tylko sprawdzane dla 1 elementu ale dla calej tablicy i dla każdego elementu z tablicy robisz  splice- i wydaje mi się ze nie do konca wiesz co się wtedy dzieje 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Splice nie zwróci Ci usuwanego elementu, ale zwraca Ci całą tablice bez tego co usuwasz. 

const dataNr = ['1', '2', '3', '4'];
dataNr.splice(1, 1);
// index = 1 , element 1 
console.log(dataNr);
//> Array ["1", "3", "4"]