React is one of the most popular libraries for building user interfaces. It’s no surprise that React developers are in high demand. If you’re preparing for a React interview, live coding challenges are an essential part of the process. These challenges test your understanding of React concepts, your problem-solving skills, and your ability to write clean, efficient code.
In this blog post, we’ll cover 20 advanced React coding challenges that can help you ace your next interview. Each challenge includes a problem description and an example solution to help you understand the concept better. Let’s dive in!
Table of Contents
Create a Counter Component
Implement a Toggle Switch
Build a To-Do List
Fetch Data from an API
Create a Search Bar
Build a Dropdown Menu
Implement a Tabs Component
Create a Modal Component
Build a Carousel Component
Implement a Star Rating Component
Create a Real-Time Search Filter
Build a Multi-Step Form
Implement a Virtualized List
Create a Reusable Form Component with Validation
Implement a Dynamic Form with Field Arrays
Implement a Context API for Global State
Create a Custom Hook
Build a Todo List with Drag-and-Drop
Create a Countdown Timer
Implement Formik with Yup Validation
Conclusion
1. Create a Counter Component.
Problem:
Create a simple counter component that increases or decreases the count when clicking buttons.
Solution:
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count – 1)}>Decrease</button>
</div>
);
};
export default Counter;
2. Implement a Toggle Switch
Problem:
Create a toggle switch component between “On” and “Off” states.
Solution:
const ToggleSwitch = () => {
const [isOn, setIsOn] = useState(false);
return (
<div>
<button onClick={() => setIsOn(!isOn)}>
{isOn ? ‘Off‘ : ‘On‘}
</button>
</div>
);
};
export default ToggleSwitch;
3. Build a To-Do List
Problem:
Create a to-do list component where users can add, remove, and mark items as complete.
Solution:
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [text, setText] = useState(”);
const addTodo = () => {
if (text) {
setTodos([…todos, { text, completed: false }]);
setText(”);
}
};
const toggleTodo = index => {
const newTodos = […todos];
newTodos[index].completed = !newTodos[index].completed;
setTodos(newTodos);
};
const removeTodo = index => {
const newTodos = […todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} placeholder=“Add a to-do“ />
<button onClick={addTodo}>Add</button>
<ul>
{todos.map((todo, index) => (
<li key={index} style={{ textDecoration: todo.completed ? ‘line-through‘ : ‘none‘ }}>
{todo.text}
<button onClick={() => toggleTodo(index)}>Toggle</button>
<button onClick={() => removeTodo(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
4. Fetch Data from an API
Problem:
Create a component fetching data from an API and displaying it in a list.
Solution:
const DataFetcher = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(‘https://api.example.com/data‘)
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
});
}, []);
if (loading) return <p>Loading…</p>;
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default DataFetcher;
5. Create a Search Bar
Problem:
Create a search bar component that filters a list of items as the user types.
Solution:
const SearchBar = ({ items }) => {
const [query, setQuery] = useState(”);
const filteredItems = items.filter(item =>
item.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<input
type=“text“
value={query}
onChange={e => setQuery(e.target.value)}
placeholder=“Search…“
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
const App = () => {
const items = [‘Apple‘, ‘Banana‘, ‘Cherry‘, ‘Date‘, ‘Elderberry‘];
return <SearchBar items={items} />;
};
export default App;
6. Build a Dropdown Menu
Problem:
Create a dropdown menu component that displays a list of items when clicked.
Solution:
const DropdownMenu = ({ items }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen && (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
</div>
);
};
const App = () => {
const items = [‘Profile‘, ‘Settings‘, ‘Logout‘];
return <DropdownMenu items={items} />;
};
export default App;
7. Implement a Tabs Component
Problem:
Create a tabs component where each tab displays different content when selected.
Solution:
const Tabs = ({ tabs }) => {
const [activeTab, setActiveTab] = useState(0);
return (
<div>
<div className=“tab-buttons“>
{tabs.map((tab, index) => (
<button
key={index}
className={index === activeTab ? ‘active‘ : ”}
onClick={() => setActiveTab(index)}
>
{tab.label}
</button>
))}
</div>
<div className=“tab-content“>
{tabs[activeTab].content}
</div>
</div>
);
};
const App = () => {
const tabs = [
{ label: ‘Tab 1‘, content: <div>Content of Tab 1</div> },
{ label: ‘Tab 2‘, content: <div>Content of Tab 2</div> },
{ label: ‘Tab 3‘, content: <div>Content of Tab 3</div> },
];
return <Tabs tabs={tabs} />;
};
export default App;
8. Create a Modal Component
Problem:
Create a reusable modal component that can be opened and closed and display any content passed to it.
Solution:
import ReactDOM from ‘react-dom‘;
const Modal = ({ isOpen, onClose, children }) => {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = ‘hidden‘;
} else {
document.body.style.overflow = ‘auto‘;
}
}, [isOpen]);
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className=“modal-overlay“ onClick={onClose}>
<div className=“modal-content“ onClick={e => e.stopPropagation()}>
<button className=“modal-close“ onClick={onClose}>Close</button>
{children}
</div>
</div>,
document.body
);
};
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h1>Modal Content</h1>
<p>This is the content inside the modal</p>
</Modal>
</div>
);
};
export default App;
9. Build a Carousel Component
Problem:
Create a carousel component that cycles through a set of images.
Solution:
const Carousel = ({ images }) => {
const [currentIndex, setCurrentIndex] = useState(0);
const goToNext = () => {
setCurrentIndex((currentIndex + 1) % images.length);
};
const goToPrevious = () => {
setCurrentIndex((currentIndex – 1 + images.length) % images.length);
};
return (
<div className=“carousel“>
<button onClick={goToPrevious}>Previous</button>
<img src={images[currentIndex]} alt=“carousel“ />
<button onClick={goToNext}>Next</button>
</div>
);
};
const App = () => {
const images = [
‘https://via.placeholder.com/600×400?text=Image+1‘,
‘https://via.placeholder.com/600×400?text=Image+2‘,
‘https://via.placeholder.com/600×400?text=Image+3‘,
];
return <Carousel images={images} />;
};
export default App;
10. Implement a Star Rating Component
Problem:
Create a star rating component where users can rate something from 1 to 5 stars.
Solution:
const StarRating = ({ totalStars = 5 }) => {
const [rating, setRating] = useState(0);
return (
<div>
{[…Array(totalStars)].map((star, index) => {
const starValue = index + 1;
return (
<span
key={index}
onClick={() => setRating(starValue)}
style={{ cursor: ‘pointer‘, color: starValue <= rating ? ‘gold‘ : ‘gray‘ }}
>
★
</span>
);
})}
</div>
);
};
const App = () => {
return (
<div>
<h1>Star Rating</h1>
<StarRating />
</div>
);
};
export default App;
11. Create a Real-Time Search Filter
Problem:
Create a search filter component that filters a list of items in real-time as the user types.
Solution:
const RealTimeSearch = ({ items }) => {
const [query, setQuery] = useState(”);
const filteredItems = items.filter(item =>
item.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<input
type=“text“
value={query}
onChange={e => setQuery(e.target.value)}
placeholder=“Search…“
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
const App = () => {
const items = [‘Apple‘, ‘Banana‘, ‘Cherry‘, ‘Date‘, ‘Elderberry‘];
return <RealTimeSearch items={items} />;
};
export default App;
12. Build a Multi-Step Form
Problem:
Create a multi-step form where users can navigate between different steps of the form.
Solution:
const Step1 = ({ next }) => (
<div>
<h2>Step 1</h2>
<button onClick={next}>Next</button>
</div>
);
const Step2 = ({ next, previous }) => (
<div>
<h2>Step 2</h2>
<button onClick={previous}>Previous</button>
<button onClick={next}>Next</button>
</div>
);
const Step3 = ({ previous }) => (
<div>
<h2>Step 3</h2>
<button onClick={previous}>Previous</button>
<button type=“submit“>Submit</button>
</div>
);
const MultiStepForm = () => {
const [step, setStep] = useState(1);
const nextStep = () => setStep(step + 1);
const previousStep = () => setStep(step – 1);
const handleSubmit = (e) => {
e.preventDefault();
console.log(‘Form submitted‘);
};
return (
<form onSubmit={handleSubmit}>
{step === 1 && <Step1 next={nextStep} />}
{step === 2 && <Step2 next={nextStep} previous={previousStep} />}
{step === 3 && <Step3 previous={previousStep} />}
</form>
);
};
const App = () => {
return (
<div>
<h1>Multi–Step Form</h1>
<MultiStepForm />
</div>
);
};
export default App;
13. Implement a Virtualized List
Problem:
Create a virtualized list component that efficiently renders a large list of items, only rendering items that are visible within the viewport.
Solution:
const VirtualizedList = ({ items, itemHeight, height }) => {
const [scrollTop, setScrollTop] = useState(0);
const totalHeight = items.length * itemHeight;
const viewportRef = useRef(null);
const handleScroll = () => {
setScrollTop(viewportRef.current.scrollTop);
};
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(items.length – 1, startIndex + Math.ceil(height / itemHeight));
const visibleItems = items.slice(startIndex, endIndex + 1).map((item, index) => (
<div key={index} style={{ height: itemHeight }}>
{item}
</div>
));
return (
<div ref={viewportRef} onScroll={handleScroll} style={{ height, overflowY: ‘auto‘, position: ‘relative‘ }}>
<div style={{ height: totalHeight, position: ‘relative‘ }}>
<div style={{ position: ‘absolute‘, top: startIndex * itemHeight, width: ‘100%‘ }}>
{visibleItems}
</div>
</div>
</div>
);
};
const App = () => {
const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
return (
<div>
<VirtualizedList items={items} itemHeight={50} height={400} />
</div>
);
};
export default App;
14. Create a Reusable Form Component with Validation
Problem:
Build a reusable form component that handles form state and validation for various form fields.
Solution:
const useForm = (initialValues, validate) => {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const handleChange = (e) => {
const { name, value } = e.target;
setValues({ …values, [name]: value });
const error = validate({ [name]: value });
setErrors({ …errors, [name]: error[name] });
};
const handleSubmit = (callback) => (e) => {
e.preventDefault();
const validationErrors = validate(values);
setErrors(validationErrors);
if (Object.keys(validationErrors).length === 0) {
callback();
}
};
return { values, errors, handleChange, handleSubmit };
};
const Form = ({ onSubmit }) => {
const initialValues = { username: ”, email: ” };
const validate = (values) => {
const errors = {};
if (!values.username) {
errors.username = ‘Username is required‘;
}
if (!values.email) {
errors.email = ‘Email is required‘;
} else if (!/S+@S+.S+/.test(values.email)) {
errors.email = ‘Email is invalid‘;
}
return errors;
};
const { values, errors, handleChange, handleSubmit } = useForm(initialValues, validate);
return (
<form onSubmit={handleSubmit(() => onSubmit(values))}>
<div>
<label>Username</label>
<input name=“username“ value={values.username} onChange={handleChange} />
{errors.username && <p>{errors.username}</p>}
</div>
<div>
<label>Email</label>
<input name=“email“ value={values.email} onChange={handleChange} />
{errors.email && <p>{errors.email}</p>}
</div>
<button type=“submit“>Submit</button>
</form>
);
};
const App = () => {
const handleSubmit = (values) => {
console.log(‘Form Submitted:‘, values);
};
return (
<div>
<h1>Reusable Form</h1>
<Form onSubmit={handleSubmit} />
</div>
);
};
export default App;
15. Implement a Dynamic Form with Field Arrays
Problem:
Create a dynamic form that allows users to add or remove fields dynamically.
Solution:
const DynamicForm = () => {
const [fields, setFields] = useState([{ value: ” }]);
const handleChange = (index, event) => {
const newFields = fields.slice();
newFields[index].value = event.target.value;
setFields(newFields);
};
const handleAdd = () => {
setFields([…fields, { value: ” }]);
};
const handleRemove = (index) => {
const newFields = fields.slice();
newFields.splice(index, 1);
setFields(newFields);
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(‘Form submitted:‘, fields);
};
return (
<form onSubmit={handleSubmit}>
{fields.map((field, index) => (
<div key={index}>
<input
type=“text“
value={field.value}
onChange={(e) => handleChange(index, e)}
/>
<button type=“button“ onClick={() => handleRemove(index)}>Remove</button>
</div>
))}
<button type=“button“ onClick={handleAdd}>Add Field</button>
<button type=“submit“>Submit</button>
</form>
);
};
const App = () => {
return (
<div>
<h1>Dynamic Form</h1>
<DynamicForm />
</div>
);
};
export default App;
16. Implement a Context API for Global State
Problem:
Create a global state using React’s Context API to manage the state of posts across the application.
Solution:
// Create a Context for the posts
const PostsContext = createContext();
// Define a reducer to manage the state of posts
const postsReducer = (state, action) => {
switch (action.type) {
case ‘ADD_POST‘:
return […state, action.payload];
case ‘REMOVE_POST‘:
return state.filter((post, index) => index !== action.payload);
default:
return state;
}
};
// Create a provider component
const PostsProvider = ({ children }) => {
const [posts, dispatch] = useReducer(postsReducer, []);
return (
<PostsContext.Provider value={{ posts, dispatch }}>
{children}
</PostsContext.Provider>
);
};
// Create a custom hook to use the PostsContext
const usePosts = () => {
return useContext(PostsContext);
};
const App = () => {
const { posts, dispatch } = usePosts();
const addPost = () => {
dispatch({ type: ‘ADD_POST‘, payload: ‘New Post‘ });
};
const removePost = (index) => {
dispatch({ type: ‘REMOVE_POST‘, payload: index });
};
return (
<div>
<button onClick={addPost}>Add Post</button>
<ul>
{posts.map((post, index) => (
<li key={index}>
{post} <button onClick={() => removePost(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
const Root = () => (
<PostsProvider>
<App />
</PostsProvider>
);
export default Root;
17. Create a Custom Hook
Problem:
Create a custom hook that fetches and caches data from an API.
Solution:
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let isMounted = true;
fetch(url)
.then((response) => response.json())
.then((data) => {
if (isMounted) {
setData(data);
setLoading(false);
}
})
.catch((error) => {
if (isMounted) {
setError(error);
setLoading(false);
}
});
return () => {
isMounted = false;
};
}, [url]);
return { data, loading, error };
};
const App = () => {
const { data, loading, error } = useFetch(‘https://api.example.com/data‘);
if (loading) return <p>Loading…</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
export default App;
18. Build a Todo List with Drag-and-Drop
Problem:
Create a todo list application with drag-and-drop functionality to reorder items.
Solution:
import { DragDropContext, Droppable, Draggable } from ‘react-beautiful-dnd‘;
const TodoList = () => {
const [todos, setTodos] = useState([
‘Learn React‘,
‘Learn Redux‘,
‘Build a React App‘,
]);
const handleOnDragEnd = (result) => {
if (!result.destination) return;
const reorderedTodos = Array.from(todos);
const [removed] = reorderedTodos.splice(result.source.index, 1);
reorderedTodos.splice(result.destination.index, 0, removed);
setTodos(reorderedTodos);
};
return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId=“todos“>
{(provided) => (
<ul {…provided.droppableProps} ref={provided.innerRef}>
{todos.map((todo, index) => (
<Draggable key={todo} draggableId={todo} index={index}>
{(provided) => (
<li ref={provided.innerRef} {…provided.draggableProps} {…provided.dragHandleProps}>
{todo}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
};
const App = () => {
return (
<div>
<h1>Todo List with Drag–and–Drop</h1>
<TodoList />
</div>
);
};
export default App;
19. Create a Countdown Timer
Problem:
Create a countdown timer component that counts down from a given time.
Solution:
const CountdownTimer = ({ initialSeconds }) => {
const [seconds, setSeconds] = useState(initialSeconds);
useEffect(() => {
const timer = setInterval(() => {
setSeconds((prevSeconds) => prevSeconds – 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return (
<div>
<h1>Countdown Timer</h1>
<p>{seconds} seconds remaining</p>
</div>
);
};
const App = () => {
return (
<div>
<CountdownTimer initialSeconds={60} />
</div>
);
};
export default App;
20. Implement Formik with Yup Validation
Problem:
Create a form with validation using Formik and Yup.
Solution:
import { Formik, Form, Field, ErrorMessage } from ‘formik‘;
import * as Yup from ‘yup‘;
const validationSchema = Yup.object().shape({
username: Yup.string().required(‘Username is required‘),
email: Yup.string().email(‘Invalid email‘).required(‘Email is required‘),
});
const App = () => {
return (
<div>
<h1>Formik Form with Yup Validation</h1>
<Formik
initialValues={{ username: ”, email: ” }}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log(‘Form Submitted‘, values);
}}
>
{() => (
<Form>
<div>
<label>Username</label>
<Field name=“username“ />
<ErrorMessage name=“username“ component=“div“ />
</div>
<div>
<label>Email</label>
<Field name=“email“ type=“email“ />
<ErrorMessage name=“email“ component=“div“ />
</div>
<button type=“submit“>Submit</button>
</Form>
)}
</Formik>
</div>
);
};
export default App;
Conclusion
These coding challenges cover various React concepts and techniques, from state management and hooks to custom components and libraries. Each challenge provides a problem and a solution, helping you build practical skills that can be applied in real-world projects. Whether preparing for an interview or just looking to improve your React knowledge, these challenges are a great way to practice and learn. Happy coding!