props.people.forEach((el, index) => props.people[index].id = index); //atrybut key dla react
Po co w pętli odnosisz się do `props.people`, skoro masz tą wartość dostępną pod zmienną `el`?
I po co robisz specjalnie taką pętlę do nadpisania/dodania property `id`, skoro możesz od razu nadać tą wartość w `map` niżej?
props.people.map((person, index) => // <-- używasz `index` tak samo, jak dotychczas w .forEach
<Person key={index /* tutaj `index` */} name={person.name} removal={handleRemove} />
)
Z tym, że użycie indeksu pętli nie jest optymalnym sposobem do tworzenia kluczy dla elementów listy. Zaleca się używanie unikalnej pośród rodzeństwa i stabilnej wartości, żeby React mógł jednoznacznie zidentyfikować dany element listy, nawet w przypadku zmiany ich kolejności.
https://reactjs.org/docs/lists-and-keys.html#keys
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys
+
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
W podlinkowanej dokumentacji jest też odesłanie do szerszego objaśnienia na temat negatywnych aspektów stosowania indeksów jako kluczy.
I czy pracowanie ze stroną, w ten sposób (usuwanie elementu za pomocą element.remove(), a nie aktualizując state w komponencie klasowym) jest poprawne?
Jeśli chodzi Ci o ten fragment kodu:
const handleRemove = (e) => { e.target.parentNode.remove() }
To lepiej jest przekazać propsem do komponentu dziecka callback, w którym usuniesz element tej tablicy poprzez aktualizację stanu w komponencie rodzicu i wtedy React odpowiednio skróci wyrenderowaną listę elementów. Bezpośrednio manipulacja na DOM powinna być traktowana jako ostateczność lub gdy API Reacta na coś nie pozwala.
https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs