I have 2 files named “task” and “search”
I’ve rendered the task component in search ( so when the search matches it renders items from task component)
this is my Search component
const getFilteredItems = (query, todos) => {
if (!query) {
return todos;
}
return todos.filter((todo) => todo.title.includes(query));
};
const Search = (props) => {
const [query, setQuery] = useState("");
const { todos, setTodos } = useContext(todosContext);
const filteredItems = getFilteredItems(query, todos);
return (
<StyledDiv>
<StyledInput
type="search"
marginTop="25px"
onChange={(e) => setQuery(e.target.value)}
placeholder="search..."
/>
{filteredItems.map((todo) => (
<Task />
))}
</StyledDiv>
);
};
export default Search;
and this is my Task component
const { todos, setTodos } = useContext(todosContext);
return (
<div>
{todos.map((todo) => (
<div key={todo.id}>
<ul>
<li>{todo.title}</li>
<li>{todo.description}</li>
</ul>
<Button
backgroundColor={"#ff3838"}
disabled={loading}
onClick={() => deleteHandler(todo.id)}
>
Delete
</Button>
<Checkbox
type={"checkbox"}
placeholder={"completed"}
onChange={(e) => processChange(e, todo.id)}
checked={todo.completed}
disabled={loading}
/>
</div>
))}
</div>
);
};
export default Task;
but when I add items
it duplicates ( I’m pretty sure that’s because of those 2 map functions in each of these components and I could fix the problem by combining these 2 components into one
but is there any way to have 2 separated component and fix the issue ?
idk if that helps or not but this is the content of my todoContext file
import { createContext } from "react";
export const todosContext = createContext();