35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import React from "react";
|
|
import useSelect from "../common/useSelect"; // your custom hook
|
|
|
|
const ActivityDropdown = ({ options, value, onChange, register, error }) => {
|
|
const selectRef = useSelect({ minimumResultsForSearch: 5 });
|
|
|
|
return (
|
|
<div className="col-12 col-md-12">
|
|
<label className="form-label" htmlFor="activityID">
|
|
Select Activity
|
|
</label>
|
|
<select
|
|
id="activityID"
|
|
name="activityID"
|
|
ref={selectRef}
|
|
className="select2 form-select form-select-sm"
|
|
aria-label="Default select example"
|
|
{...register("activityID", { valueAsNumber: true })}
|
|
value={value}
|
|
onChange={onChange}
|
|
>
|
|
<option value="0">Select Activity</option>
|
|
{options.map((activity) => (
|
|
<option key={activity.id} value={activity.id}>
|
|
{activity.activityName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{error && <p className="danger-text">{error.message}</p>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ActivityDropdown;
|