React
Stats widget
Write a stats widget that does an expensive computation with useMemo.
Modal pattern
In this lesson we open a modal to add a new stat. The modal opens and closes via the isOpen state; it renders as a <dialog> or a custom container.
When the form is submitted, onAdd(value) fires and the modal closes. This is the standard pattern for add forms.
This lesson's starting code includes the previous StatCard and StatsPage solution.
Form submission
Inside the modal sits a <form onSubmit={handleSubmit}>. handleSubmit calls e.preventDefault(), reads the input value, fires onAdd(value) and closes the modal.
In React, form submission reloads the page by default; you stop this with preventDefault. For a controlled input you use useState.
This pattern is the foundation of add forms and is common in projects.
Exercise AddStatModal component
Write AddStatModal: destructure { isOpen, onAdd, onClose }. If !isOpen, return null. Render a <div> with a <form onSubmit={handleSubmit}>. handleSubmit should call e.preventDefault(), read inputRef.current.value, call onAdd(value) and onClose(). export default AddStatModal.
Show example solution
import { useRef } from "react";
function AddStatModal({ isOpen, onAdd, onClose }) {
const inputRef = useRef(null);
if (!isOpen) return null;
function handleSubmit(e) {
e.preventDefault();
const value = inputRef.current.value;
onAdd(value);
onClose();
}
return (
<div>
<form onSubmit={handleSubmit}>
<input ref={inputRef} />
<button type="submit">Add</button>
</form>
</div>
);
}
export default AddStatModal;
Test yourself
-
How do you close the modal?
- Reset BrowserRouter
- Delete the route
- Clean up useEffect
- Set isOpen state to false
Show answer
Set isOpen state to false — Setting isOpen to false closes the modal.
-
Prevent form submit
function handleSubmit(e) {
e.____();
onAdd(value);
setIsOpen(false);
}
Show answer
function handleSubmit(e) {
e.preventDefault();
onAdd(value);
setIsOpen(false);
}
-
Stats widget: match the terms
- isOpen
- Modal state
- onAdd
- Add callback
- preventDefault
- Stop reload
- useState
- Input value
Next lesson: Add via modal
