solution #1
solution #1
Conversation
|
|
|
Самое время браться за дополнительные задания) |
|
|
|
|
|
|
| </div> | ||
| <input type="text" className="edit" /> | ||
| </li> | ||
| handleRemuve = (id) => { |
There was a problem hiding this comment.
| handleRemuve = (id) => { | |
| handleRemove = (id) => { |
| </div> | ||
| <input type="text" className="edit" /> | ||
| </li> | ||
| handleRemuveCompleted = () => { |
There was a problem hiding this comment.
| handleRemuveCompleted = () => { | |
| handleRemoveCompleted = () => { |
| switch (this.state.showParam) { | ||
| case 'active': | ||
| todoView = [...this.state.todos].filter(todo => ( | ||
| !todo.completed | ||
| )); | ||
| break; | ||
| case 'completed': | ||
| todoView = [...this.state.todos].filter(todo => ( | ||
| todo.completed | ||
| )); | ||
| break; | ||
| default: | ||
| todoView = [...this.state.todos]; | ||
| } |
There was a problem hiding this comment.
не роби це в рендері, винеси це в функцію getTodos(status)
| <h1>todos</h1> | ||
| <NewTodo addTodo={this.addTodo} /> | ||
| </header> | ||
| {(this.state.todos.length) |
| <footer className="footer"> | ||
| <span className="todo-count"> | ||
| {itemLeft} | ||
| item left | ||
| </span> | ||
| <TodosFilter updateTodosToShow={this.updateTodosToShow} /> | ||
| { | ||
| (this.state.todos.filter(todo => ( | ||
| todo.completed)).length) | ||
| ? ( | ||
| <button | ||
| onClick={this.handleRemuveCompleted} | ||
| type="button" | ||
| className="clear-completed" | ||
| > | ||
| Clear completed | ||
| </button> | ||
| ) | ||
| : ('') | ||
| } | ||
| </footer> |
| class NewTodo extends Component { | ||
| state = { | ||
| content: '', | ||
| id: 1, |
There was a problem hiding this comment.
чому 1? а якщо одразу є якісь завдання?
| e.preventDefault(); | ||
|
|
||
| if (this.state.content) { | ||
| this.props.addTodo(this.state); |
There was a problem hiding this comment.
не передавай весь стан, передавай готове todo наверх. addTodo має приймати todo, а не весь стан
There was a problem hiding this comment.
Але якщо я хочу щоб даний компонент відповідав повністю за створення нової todo, а зверху addTodo лише додавав її в список зі всіма готовими параметрами. Чи це погана практика???
There was a problem hiding this comment.
Якщо в стейті потрібно зберігати як можна менше, тоді я перенесу id & complited у функцію що передає todo. Так добре добре буде?
|
|
||
| this.setState(prevState => ({ | ||
| content: '', | ||
| id: prevState.id + 1, |
| <div className={todo.completed ? 'completed' : 'view'}> | ||
| <input | ||
| checked={todo.completed} | ||
| onClick={() => { | ||
| toggleComplete(todo.id); | ||
| }} | ||
| type="checkbox" | ||
| className="toggle" | ||
| id={`todo-${todo.id}`} | ||
| /> | ||
| <label htmlFor={`todo-${todo.id}`}>{todo.content}</label> | ||
| <button | ||
| onClick={() => { | ||
| remuve(todo.id); | ||
| }} | ||
| type="button" | ||
| className="destroy" | ||
| /> | ||
| </div> | ||
| <input type="text" className="edit" /> |
There was a problem hiding this comment.
Todo компонент, розбивай логіку на дрібніші компоненти
| <li> | ||
| <a | ||
| href="#/" | ||
| onClick={() => (updateTodosToShow('all'))} | ||
| > | ||
| All | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#/active" | ||
| onClick={() => (updateTodosToShow('active'))} | ||
| > | ||
| Active | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="#/completed" | ||
| onClick={() => (updateTodosToShow('completed'))} | ||
| > | ||
| Completed | ||
| </a> | ||
| </li> |
There was a problem hiding this comment.
все чим ці три фільтри відрізняються це один рядок. Ти можеш створити комонент Filter який буде приймати цей рядок і підставляти в потрібне місце, а потім через map зробити собі 3 фільтри. Коду менше буде
3 participants
DEMO LINK
solution without