React To-Do usuwanie notatki

Witam
1.Zaczynam naukę Reacta , oglądałem kilka poradników do prostej aplikacji To-Do, rozumiem jak się dodaje nową notatkę, nie mam natomiast w ogóle wyobraźni co do usuwania tej notatki ( o konkretnym id) , jest mi ktoś w stanie wytłumaczyć na jakiej zasadzie odbywa się takie usuwanie?
2. Mam problem z przesłaniem referencji z rodzica na dziecko ,wydaje mi się że robię wszystko identycznie jednak funkcja nie działa(chodzi o funkcje deleteItem)

plik Todo.js

import React from 'react';
import TodoItem from './TodoItem'

class Todo extends React.Component{
    state = {
        elements: [
            {id: '234544365', isComplited: true, title: 'Zrobić zakupy'},
            {id: '234553452', isComplited: false, title: 'Opłacić domenę'}

        ],
        inputValue: ''
    }

    markComplited(id){
        const index = this.state.elements.findIndex(x => x.id == id)
        const newElements = this.state.elements
        newElements[index].isComplited = true

        this.setState({elements: newElements})
    }

    addItem() {
        const item = {
            id: Math.random(),
            title: this.state.inputValue
        }
        const newElements = [item, ...this.state.elements]
        this.setState({elements: newElements})
        this.setState({inputValue: ''})
    }

    deleteItem()
    {
        console.log('usuwam')
    }

    inputHandler(event)
    {
        const newValue = event.target.value
        this.setState({inputValue: newValue})
    }
    
    

    render(){
        const elements = this.state.elements.map(e => {
            return <TodoItem element={e} markClicked={this.markComplited.bind(this)}  />
        })
        return(
            <div>
            Todo app
            <input type="text" value={this.state.inputValue} onChange={this.inputHandler.bind(this)}/>
            <button onClick={this.addItem.bind(this)}>Dodaj tekst</button>
            {elements}
            </div>
        ) 

        
    }
}

export default Todo;

plik TodoItem.js

import React from 'react';
import Todo from "./Todo";

const TodoItem = props => {
    return(
        <div className={`card ${props.element.isComplited ? 'complited': ''}`} key={props.element.id}>
            <h2>{props.element.title}</h2>
            <button onClick={() => props.markClicked(props.element.id)}>Zakończone</button>
            <button onClick={() => delete}>usuń</button>
        </div>
    )
}

export default TodoItem;

Pozdrawiam!

markComplited(

literówka (Complited --> Completed)

   const newElements = this.state.elements

w JS przypisywanie tablicy odbywa się przez referencję, co oznacza, że newElements będzie tą samą tablicą, co this.state.elements. Czyli nie osiągasz swojego celu, bo tak jak zapisujesz, to newElements to jest to samo, co this.state.elements. Nie robisz wcale kopii.

A co za tym idzie:

newElements[index].isComplited = true

Przypuszczalnie React nie załapie, że coś się zmieniło, bo zmieniasz tak naprawdę oryginalną tablicę (a należałoby kopię), więc dla Reacta to to samo.

Płytką kopię tablicy można zrobić w JS np. tak:

    const newElements = this.state.elements.slice();

jest mi ktoś w stanie wytłumaczyć na jakiej zasadzie odbywa się takie usuwanie?

możesz przefiltrować tablicę za pomocą filter, np.:

 deleteItem(id)  {
    this.setState({elements: this.state.elements.filter(_id => _id != id)});
 }

albo lepiej z callbackiem:

   deleteItem(id)  {
      this.setState(state => ({elements: state.elements.filter(_id => _id != id)})) ;
   }

@LukeJL:

możesz przefiltrować tablicę za pomocą filter, np.:

 deleteItem(id)  {
    this.setState({elements: this.state.elements.filter(_id => _id != id)});
 }

albo lepiej z callbackiem:

   deleteItem(id)  {
      this.setState(state => ({elements: state.elements.filter(_id => _id != id)})) ;
   }

Co do funkcji usuwania , czyli to działa tak że id nie równa się id i zwraca wartość false i dlatego notatka znika?

literówka (Complited --> Completed)

   const newElements = this.state.elements

Mój błąd po prostu skopiowałem kod z poprzedniej wersji, chodziło mi o funkcję

deleteItem()
   {
       console.log('usuwam')
   }

chciałem ją przenieść z Todo.js do TodoItem.js

zrobiłem to tak:
plik Todo.js

<TodoItem element={e} markClicked={this.markComplited.bind(this)} delete={this.deleteItem.bind(this)}  />

plik TodoItem.js

<button onClick={() => this.delete.bind(this)}>usuń</button>

I po kliknięciu nic się nie dzieje :/

W TodoItem.js

<button onClick={() => this.props.delete)}>usuń</button>

@mariano901229: @LukeJL Już wszystko wyjaśnione , dzięki :D

Co do funkcji usuwania , czyli to działa tak że id nie równa się id i zwraca wartość false i dlatego notatka znika?

możesz przeczytać jak dokładnie działa funkcja filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter