React/JS prop separated by colon [duplicate]

Question

what is the meaning of the colons in between { placeholder }: { placeholder: string } in the props of the Search component? This also shows up later in the code in the main Page component....

Is it to say that the expected placeholder prop is to be of string datatype? Or is it some sort of destructuring?

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();

  return (
      <input
        className="red"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value)
        }}
      />
  );
}

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  }

}) {
  const query = searchParams?.query || "";
  const currentPage = Number(searchParams?.page) || 1;
  
  return (
     <>
       <Search placeholder="Search invoices..." />
       <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
          <Table query={query} currentPage={currentPage} />
        </Suspense>
     </>

  );
}

Answer 1

You are looking at Typescript code. The colons are used to define the type of the props. In this case, the type of the props is an object with a key of placeholder and a value of string.

You can also use the colons to define the type of the props in the following way:

interface Props {
  placeholder: string;
}

const Input = ({ placeholder }: Props) => {
  return <input placeholder={placeholder} />;
};