1.
Build a Counter App with Increment, Decrement,
and Reset
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div style={{ textAlign: 'center' }}>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count > 0 ? count - 1 : 0)}>Decrement</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
};
export default Counter;
2. To-Do List with Add, Delete, and Toggle Completion
import React, { useState } from 'react';
const TodoApp = () => {
const [task, setTask] = useState('');
const [todos, setTodos] = useState([]);
const addTask = () => {
if ([Link]()) {
setTodos([...todos, { id: [Link](), text: task, done: false }]);
setTask('');
};
const toggleTask = (id) => {
setTodos([Link](todo =>
[Link] === id ? { ...todo, done: ![Link] } : todo
));
};
const deleteTask = (id) => {
setTodos([Link](todo => [Link] !== id));
};
return (
<div>
<h2>Todo List</h2>
<input value={task} onChange={(e) => setTask([Link])} />
<button onClick={addTask}>Add</button>
<ul>
{[Link](todo => (
<li key={[Link]}>
<span
onClick={() => toggleTask([Link])}
style={{ textDecoration: [Link] ? 'line-through' : 'none', cursor: 'pointer' }}
>
{[Link]}
</span>
<button onClick={() => deleteTask([Link])}> </button>
</li>
))}
</ul>
</div>
);
};
3. Search Filter List
export default TodoApp;
import React, { useState } from 'react';
const users = ['Alice', 'Bob', 'Charlie', 'David', 'Eva'];
const SearchFilter = () => {
const [search, setSearch] = useState('');
const filteredUsers = [Link](user =>
[Link]().includes([Link]())
);
return (
<div>
<input
placeholder="Search user..."
value={search}
onChange={(e) => setSearch([Link])}
/>
<ul>
{[Link]((user, idx) => (
<li key={idx}>{user}</li>
))}
</ul>
</div>
);
};
export default SearchFilter;
4. Accordion Component (Expandable/Collapsible
Sections)
import React, { useState } from 'react';
const data = [
{ title: 'Section 1', content: 'This is section 1 content' },
{ title: 'Section 2', content: 'This is section 2 content' },
{ title: 'Section 3', content: 'This is section 3 content' },
];
const Accordion = () => {
const [openIndex, setOpenIndex] = useState(null);
return (
<div>
{[Link]((item, idx) => (
<div key={idx}>
<h3 onClick={() => setOpenIndex(openIndex === idx ? null : idx)}>
{[Link]}
</h3>
{openIndex === idx && <p>{[Link]}</p>}
</div>
))}
</div>
);
};
export default Accordion;
5. Debounce Search Input
import React, { useState, useEffect } from 'react';
const DebounceSearch = () => {
const [input, setInput] = useState('');
const [debounced, setDebounced] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
setDebounced(input);
[Link]('Searching for:', input);
}, 500);
return () => clearTimeout(timer);
}, [input]);
return (
<div>
<input
placeholder="Search..."
value={input}
onChange={(e) => setInput([Link])}
/>
<p>Search result for: {debounced}</p>
</div>
);
};
export default DebounceSearch;
6. Form Validation with Error Messages
import React, { useState } from 'react';
const FormValidation = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
const validate = () => {
const errs = {};
if () [Link] = 'Invalid email';
if ([Link] < 6) [Link] = 'Min 6 characters';
setErrors(errs);
return [Link](errs).length === 0;
};
const handleSubmit = (e) => {
[Link]();
if (validate()) {
alert('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<input
value={email}
onChange={(e) => setEmail([Link])}
placeholder="Email"
/>
<div style={{ color: 'red' }}>{[Link]}</div>
<input
type="password"
value={password}
onChange={(e) => setPassword([Link])}
placeholder="Password"
/>
<div style={{ color: 'red' }}>{[Link]}</div>
<button type="submit" disabled={!email || !password}>
Submit
</button>
</form>
);
};
export default FormValidation;
8. Tabs Component
import React, { useState } from 'react';
const tabs = [
{ label: 'Home', content: 'This is the home tab' },
{ label: 'About', content: 'This is the about tab' },
{ label: 'Contact', content: 'This is the contact tab' },
];
const Tabs = () => {
const [active, setActive] = useState(0);
return (
<div>
<div style={{ display: 'flex' }}>
{[Link]((tab, index) => (
<button
key={index}
onClick={() => setActive(index)}
style={{
fontWeight: active === index ? 'bold' : 'normal',
marginRight: 10,
}}
>
{[Link]}
</button>
))}
</div>
<div style={{ marginTop: 20 }}>
<p>{tabs[active].content}</p>
</div>
</div>
);
};
export default Tabs;
10. Pagination Component
import React, { useState } from 'react';
const data = [Link]({ length: 50 }, (_, i) => `Item ${i + 1}`);
const Pagination = () => {
const [page, setPage] = useState(1);
const perPage = 10;
const start = (page - 1) * perPage;
const end = start + perPage;
const totalPages = [Link]([Link] / perPage);
return (
<div>
<ul>
{[Link](start, end).map((item, idx) => (
<li key={idx}>{item}</li>
))}
</ul>
<div>
<button disabled={page === 1} onClick={() => setPage(p => p - 1)}>Prev</button>
<span> Page {page} of {totalPages} </span>
<button disabled={page === totalPages} onClick={() => setPage(p => p + 1)}>Next</button>
</div>
</div>
);
};
export default Pagination;
