I am developing a search bar that performs the search by calling an api, I encounter an error: Parsing error: Missing semicolon. The error comes from this part of the code:
const form = event.target as HTMLFormElement;
specifically between the event.target and the as. Could someone explain me the reason of this error and how to solve it?
import React, { FormEvent, useState, useEffect } from "react";
import Select, { SingleValue } from "react-select";
import { getCollegiate } from "../../api/drupalAPI";
import { Collegiate } from "@icofcv/common";
import Loader from "../spinner/Loader";
interface Props {
showModal: boolean;
closeModal: () => void;
}
export const ModalFilterCollegiate: React.FC<Props> = ({
children,
showModal,
closeModal,
}) => {
const [collegiateList, setCollegiateList] = useState<Collegiate[]>([]);
const [collegiateSearch, setCollegiateSearch] = useState("");
const searchForCollegiates = async (query: String): Promise<Collegiate[]> => {
const result = await fetch(`/collegiate?filter=${query}`);
return (await result.json()).results;
};
useEffect(() => {
(async () => {
const query = encodeURIComponent(collegiateSearch);
const response = await searchForCollegiates(query);
setCollegiateList(response);
})();
}, [collegiateSearch]);
const search = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
const input = form.querySelector("#searchText") as HTMLInputElement;
setCollegiateSearch(input.value);
input.value = "";
};
return (
<>
<div>
{showModal ? (
<>
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
<div className="relative p-2 w-full max-w-2xl h-full md:h-auto">
{/*content*/}
<div className="relative bg-white rounded-lg shadow">
{/*header*/}
<div className="flex justify-between items-start px-4 py-3 rounded-t border-b">
<h3 className="text-lg font-medium">Buscar Colegiado</h3>
<button
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
onClick={closeModal}
>
<svg
aria-hidden="true"
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
{/*body*/}
<div className="relative px-3 py-3 flex-auto overflow-auto modal-body">
<form
className="searchForm"
onSubmit={(event) => search(event)}
>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Número colegiado
</label>
<input
name=""
type="text"
id=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Nombre
</label>
<input
name=""
type="text"
id="searchText"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
<div className="relative z-0 w-full group my-2">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Apellidos
</label>
<input
name=""
type="text"
id=""
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="grid md:grid-cols-2 md:gap-4">
<div className="relative z-0 w-full group">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Provincia
</label>
<select className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option>Cualquier Provincia</option>
</select>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
<div className="relative z-0 w-full group">
<label
htmlFor=""
className="block mb-2 text-xs font-medium text-stone-600"
>
Tipo
</label>
<select className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
<option>Seleccionar tipo</option>
<option>Ejercientes</option>
<option>No ejercientes</option>
<option>Honorarios</option>
<option>Colegiados de honor</option>
</select>
<p className="mt-2 text-xs text-red-600 hidden">
Completa este espacio
</p>
</div>
</div>
<div className="flex items-center justify-end px-4 py-3 border-t border-solid border-slate-200 rounded-b gap-2">
<button
className="btn text-black text-sm background-transparent px-8 outline-none focus:outline-none focus:ring-teal-600 focus:border-teal-600"
type="button"
onClick={closeModal}
>
Cancelar
</button>
<button
className="btn bg-teal-600 hover:bg-teal-700 text-white text-sm active:bg-teal-700 px-8 outline-none focus:outline-none"
type="button"
>
Buscar
</button>
</div>
</form>
</div>
{/*footer*/}
{collegiateList.map((collegiate) => (
<tr key={collegiate.id} className="bg-white border-b">
<td className="py-2 px-6">{collegiate.color}</td>
<td className="py-2 px-6">{collegiate.collegiate}</td>
<td className="py-2 px-6">{collegiate.firstname}</td>
<td className="py-2 px-6">{collegiate.lastname}</td>
<td className="py-2 px-6">{collegiate.provincia}</td>
</tr>
))}
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
) : null}
</div>
</>
);
};
