To build a todo app with search functionality using React and CSS, you can follow these steps:
- Create a new React app using the create-react-app command.
npx create-react-app my-todo-app - In the project directory, create a new component called TodoList that will render a list of todo items. You can use the state object to store the list of todo items and a handleChange function to update the list when a new todo item is added or an existing item is deleted.
import React, { useState } from 'react';
function TodoList() {
const [todos, setTodos] = useState([]);
const handleChange = (event) => {
// code to add or delete todo items goes here
}
return (
<div>
<form>
<input type="text" onChange={handleChange} />
<button type="submit">Add Todo</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
export default TodoList;
- In the handleChange function, you can use the event.target.value to get the value of the input field and add it to the list of todos using the setTodos function. You can also implement a delete button for each todo item that will remove it from the list when clicked.
const handleChange = (event) => {
const text = event.target.value;
if (event.key === 'Enter' && text.trim()) {
setTodos([...todos, { id: Date.now(), text }]);
event.target.value = '';
}
}
...
<button type="button" onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>
Delete
</button>
- To add search functionality, you can create a new component called Search that will render an input field and a search button. The search button should call a function that filters the list of todos based on the search term.
import React, { useState } from 'react';
function Search() {
const [searchTerm, setSearchTerm] = useState('');
const handleSearch = () => {
// code to filter the list of todos goes here
}
return (
<div>
<input type="text" onChange={(event) => setSearchTerm(event.target.value)} />
<button type="button" onClick={handleSearch}>Search</button>
</div>
);
}
export default Search;
- In the handleSearch function, you can use the searchTerm to filter the list of todos and update the state using the setTodos function.
const handleSearch = () => { set todos(todos.filter((todo) => todo.text.toLowerCase().includes(searchTerm.toLowerCase()))); } - To style the todo app, you can use CSS. You can either include the CSS in the component file itself using the
styleattribute or create a separate CSS file and import it into the component.
Here's an example of how you can style the TodoList component:
import './TodoList.css';
...
<div className="todo-list">
<form>
<input type="text" onChange={handleChange} />
<button type="submit">Add Todo</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo.id} className="todo-item">
{todo.text}
<button type="button" onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>
Delete
</button>
</li>
))}
</ul>
</div>
.todo-list {
display: flex;
flex-direction: column;
}
.todo-item {
display: flex;
align-items: center;
}
.todo-item button {
margin-left: 10px;
}
- Finally, you can use the TodoList and Search components in the main App component to render the todo app.
import React from 'react';
import TodoList from './TodoList';
import Search from './Search';
function App() {
return (
<div>
<Search />
<TodoList />
</div>
);
}
export default App;
I hope this helps! Let me know if you have any questions.
Top comments (0)