"<i>TypeScript error: Property &#39;children&#39; does not exist on type &#39;{ children?: ReactNode;<\/i> TypeScript 错误：类型 &#39;{ children?: ReactNode; 上不存在属性 &#39;children&#39;<\/b> <i>}&#39;<\/i> }&#39;<\/b>"

Question

https://www.emgoto.com/react-search-bar/

I am implementing the search bar from the link above.
But I get a typescript error and I tried to match the type, but it didn't work..

Homepage.tsx

const [searchQuery, setSearchQuery] = useState(query || '');

return(
<Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
);

Search.tsx

import React, { FC } from 'react';

const Search: FC = ({ searchQuery, setSearchQuery }) => { // error!
  return (
    <form action="/" method="get">
      <label htmlFor="header-search">
        <span className="visually-hidden">Search blog posts</span>
      </label>
      <input
        value={searchQuery}
        onInput={(e) => setSearchQuery(e.target.value)}
        type="text"
        id="header-search"
        placeholder="Search blog posts"
        name="s"
      />
      <button type="submit">Search</button>
    </form>
  );
};

export default Search;

Error:

1. Property 'searchQuery' does not exist on type '{ children?: ReactNode; }'.ts(2339)
2. Property 'setSearchQuery' does not exist on type '{ children?: ReactNode; }'.ts(2339)

Answer 1

Comment from CRice

React.FC is a generic type which accepts the type of the props as its parameter. You'll need to include the prop type. Example:

const Search: FC<{searchQuery: string, setSearchQuery: (new_query: string) => void}> = ...