Conversation
| return ( | ||
| /* When the user clicks submit, call the addTodo func */ | ||
| <Container> | ||
| <form onSubmit={this.props.addTodo}> |
There was a problem hiding this comment.
You shouldn't really have to use a form component in React. The form's functionality is already accomplished by keeping track of a text value in state and then updating it whenever the user types in the box, as you do.
However, this currentText in the state of your TodoContainer is only used in this component, so it should live in this component rather than higher up. When you submit, then you can access the state from this component and add it to the todos in the state of the TodoContainer.
In general, always try to keep state as low as possible to where it's actually being used.
| import React, { Component } from "react"; | ||
| import { Input } from "./styles"; | ||
|
|
||
| class SearchTodos extends Component { |
There was a problem hiding this comment.
Since this component has no state or methods, you can actually use a shorthand that we call an SFC (stateless functional component):
const SearchTodos = ({searchText, handleSearch}) => (
<Input
value={searchText}
placeholder="Search Todos"
onChange={handleSearch}
/>
)
There was a problem hiding this comment.
The arguments to this "function" are the props, passed as an object (I use destructuring in the argument to access the different props as individual variables), and the return value is JSX
| class TodoItems extends Component { | ||
| // Function to create the list | ||
| makeList = todo => { | ||
| if (todo.status) { |
There was a problem hiding this comment.
Is status in todo to mark if the todo has been deleted or not? If so, you might consider just removing the todos from the list when the user clicks the button, since todos are irrecoverable in our app
There was a problem hiding this comment.
Status is to determine what to show when the user searches. True means show the item in our todo list
| // Make sure the current item is not empty before adding | ||
| if (this.state.currentText !== "") { | ||
| const items = [ | ||
| ...this.state.items, |
| return t; | ||
| }); | ||
|
|
||
| this.setState({ |
There was a problem hiding this comment.
By setting the state of the items to only the matching todos of the query, we lose all of the other todos even after the user gets rid of their text. Instead of changing the state when processing the queries, I'd think about a way to filter which todos get displayed to the user more dynamically
2 participants
No description provided.