TypeScript error: Property 'children' does not exist on type '{ children?: ReactNode; }'

user_15603993 0
Viewed 2964

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)
use-state typescript reactjs search javascript
1 Answers

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}> = ...
user_156039930
Related