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 | 144x 144x 29x 4x 4x 29x 5x | 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>
);
}
|