Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 1x 1x 1x 1x 29x 29x 29x 29x 29x 29x 144x 144x 144x 29x 29x 4x 4x 4x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x 29x | import { Typeahead } from "react-bootstrap-typeahead";
import { Form } from "react-bootstrap";
import "react-bootstrap-typeahead/css/Typeahead.css";
export default function RosterStudentDropdown({
rosterStudents,
value,
onChange,
isInvalid,
}) {
const options = rosterStudents.map((student) => ({
id: student.id,
fullName: `${student.firstName} ${student.lastName}`,
}));
const selectedOption = options.filter((opt) => opt.id === value);
const handleSelectionChange = (selected) => {
const id = selected.length > 0 ? selected[0].id : "";
onChange(id);
};
return (
<Form.Group controlId="rosterStudentId">
<Typeahead
id="rosterStudentId-typeahead"
options={options}
labelKey="fullName"
placeholder="Select a student."
selected={selectedOption}
onChange={handleSelectionChange}
highlightOnlyResult
onInputChange={(text) => onChange(text)}
inputProps={{
"aria-label": "Select Student",
"data-testid": "RosterStudentDropdown",
className: isInvalid ? "form-control is-invalid" : "form-control",
}}
/>
</Form.Group>
);
}
|