Проблема с прокидыванием функции в пропсы. React & TypeScript

Проблема с прокидыванием функции в пропсы. React & TypeScript

Родительский компонент передаёт функцию setFanfic как аргумент для другого компонента.

    import React, { useState } from 'react';

    import FanficList from './fanfics-list/fanfics-list';
    import {FanficsContent} from './fanfics-content/fanfics-contens';

    import s from './fanfics.module.css';


    export const Fanfics = () => {
        const [fanfic, setFanfic] = useState("5fd9eeacf4d7ca5581d97161")
        return (
            <div className={s.fanficsWrapper}>
                <FanficList setFanfic={(id: any) => setFanfic(id)}/>
                <FanficsContent />
            </div>
        );      
    };

Однако при компиляции возникает ошибка. (Компилятор указывает на аргумент setFanfic в файле выше)

    Type '{ setFanfic: (id: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<unknown> & Readonly<{ children?: ReactNode; }>'.
      Property 'setFanfic' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<unknown> & Readonly<{ children?: ReactNode; }>'.ts(2322)

код дочернего компонента

Вот код дочернего компонента, который получает функцию в пропсах:

    import React from 'react';
    import s from './fanfics-list.module.css';
    import withHoc from './fanfics-list-hoc';


    const List = (props: any) => {
        let fanfics = null
        if (props.data.fanfics) {
            fanfics = props.data.fanfics.map((e: any) => 
            <li key={e.id} onClick={() => props.setFanfic(e.id)}>
                <span>{e.name}, </span>
                <span>author: {e.author}</span>
            </li>)
        }

        return (
            <div className={s.list}>
                <ul>{fanfics}</ul>
            </div>
        );
    };

    export default withHoc(List);

HOC withHoc

Вот HOC withHoc, снабжающий компонент List данными из gQL.

    import {compose} from 'recompose';
    import {graphql} from 'react-apollo';
    import {fanficsQuery} from '../queries';

    export default compose(graphql(fanficsQuery));

fanficsQuery

    import {gql} from 'apollo-boost';

    export const fanficsQuery = gql`
        query fanficsQuery {
            fanfics {
                id
                name
                author
            }
        }
    `;

Ответы (1 шт):

Автор решения: Vasujke

ты не описал в что за пропсы у тебя в FanficList приходят,

в дочернем

type Props = {
  setFanfic: (e: тип) => void  
} 

const List<Props> = ({setFanfic}) => ... 
→ Ссылка