Pass function props in react typescript-CodePudding

I am learning how to use react-ketting

There are some examples of using it on the wiki

And in UseCollection section I am stuck

Could someone explain what is this and how it works:

function MyCollectionItem({resource}: { resource: Resource<Article> }) {

Full snippet is:

function MyCollection() {

  const {
    loading,
    error,
    items
  } = useCollection<Article>('/articles');

  if (loading) return <div>loading...</div>;
  if (error) return <div >boo</div>;

  return <ul>{items.map(item => <MyCollectionItem resource={item} />)}</ul>

}

function MyCollectionItem({resource}: { resource: Resource<Article> }) {
  const {
    loading,
    error,
    data
  } = useResource(resource);

  if (loading) return <div>loading...</div>;
  if (error) return <div className="error">boo</div>;

  return <li>{data.title} - {data.body}</li>;
}

I want to add string prop to MyCollectionItem like

function MyCollectionItem({resource}: { resource: Resource<Article> }, anotherOption: string) {

And call it

<MyCollectionItem·resource={item}·anotherOption='project'·key={item.uri}·/>

Got error

[tsserver 2322] [E] Type '{ resource: Resource<Article>; anotherOption: string; key: string; }' is not assignable to type 'IntrinsicAttributes & { resource: Resource<Article>; }'. Property 'anotherOption' does not exist on type 
 IntrinsicAttributes & {  resource: Resource<Article>; }'

CodePudding user response：

By React covention, all component props are passed as an object as the 1st argument of your Functional Component.

So if you call the component:

<MyCollectionItem
  resource={item}
  anotherOption='project'
/>

React will actually call the function like:

MyCollectionItem({
  resource: item,
  anotherOption: "project"
})

Therefore your extra prop should be an extra member of the 1st argument (usually through destructuring), instead of a 2nd positional argument:

function MyCollectionItem({
  resource,
  anotherOption
}: {
  resource: Resource<Article>;
  anotherOption: string;
}) {}