Best way to develop this function in react js instead of this current .map

Question

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

Answer 1

This way may bring you closer to the answer, But make sure there is slug in courses

{courses.map(({ slug }) => (
        <div className="col-md-4">
           <Header course={slug}/>
         </div>
 ))}

and in component Header :

const Header = ({slug}) => {
  console.log(slug)
...
}