first of all i am new to all this, so apologies. I am trying to develop a search function, now i have developed it but as to my app there is a problem.
The search function which is in my header component is rendered like this in my index
<Header course={course}/>
which does not work as i get “cannot get property of slug” which is here in the header component
import React, { useState, useEffect } from "react";
import Link from "next/link";
import {
ShoppingCartIcon,
MenuIcon,
SearchIcon,
} from "@heroicons/react/outline";
import { useRouter } from "next/router";
import * as Realm from "realm-web";
const Header = ({course}) => {
const {slug } = course;
const router = useRouter();
const [searchTerm, setSearchTerm] = useState("");
const [autoComplete, setAutoComplete] = useState([]);
useEffect(async () => {
if (searchTerm.length) {
// add your Realm App Id to the .env.local file
const REALM_APP_ID = process.env.NEXT_PUBLIC_REALM_APP_ID;
const app = new Realm.App({ id: REALM_APP_ID });
const credentials = Realm.Credentials.anonymous();
try {
const user = await app.logIn(credentials);
const searchAutoComplete = await user.functions.searchAutoComplete(
searchTerm
);
setAutoComplete(() => searchAutoComplete);
} catch (error) {
console.error(error);
}
} else {
setAutoComplete([]);
}
}, [searchTerm]);
const handleSubmit = (e) => {
e.preventDefault();
setSearchTerm("");
router.push({
pathname: `/search/${searchTerm}`,
});
};
const handleSelect = (id) => {
setSearchTerm("");
router.push({
pathname: `/course/${slug}`,
});
};
return (
<>
<header>
<form onSubmit={handleSubmit}>
<input
className="w-full border rounded-md pl-10 pr-4 py-2 focus:border-green-500 focus:outline-none focus:shadow-outline"
type="text"
placeholder="Search"
onChange={(e) => setSearchTerm(e.target.value)}
value={searchTerm}
/>
</form>
{autoComplete.length > 0 && (
<ul className="absolute inset-x-0 top-full bg-green-200 border border-green-500 rounded-md z-20">
{autoComplete.map((item) => {
return (
<>
<li
key={item.slug}
className="px-4 py-2 hover:bg-green-300 cursor-pointer"
onClick={() => handleSelect(item.slug)}
>
{item.name}
</li>
</>
);
})}
</ul>
)}
</div>
</div>
</header>
</>
);
};
export default Header;
Now in my index file it should be something like this:
<Header course={course}/>
But i have to put it in a map function and it does not work properly like that,
{courses.map((course) => (
<div className="col-md-4">
{/* <Cards course={course} /> */}
<Header course={course}/>
</div>
))}
So can you guys tell me or show me what type of function i need to use so that my identifiers, args whatever can work and my search index with slug will work
