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!