Type is not assignable when using array map to pass in react component

Question

I want to iterate a react component based on array data I have in payload.

interface PayloadItemInterface {
  login: string
}

const QueriesAccordion=()=>{
const SearchPage = useContext(SearchPageContext);
  const {searchPayload} = SearchPage;
  const {payload} = searchPayload;
  return (
    <Accordion>
      {payload.length > 0 ? payload.map((x:PayloadItemInterface, id) =>
        <Accordion.Item eventKey={`${id}`}>
            <Accordion.Header>{x.login}</Accordion.Header>
            <Accordion.Body>
              Lorem ipsum dolor sit amet.
            </Accordion.Body>
          </Accordion.Item>
      ): null}
    </Accordion>
  );
};

But this code returns error that

1. Argument of type '(x: PayloadItemInterface, id: number) => Element' is not assignable to parameter of type '(value: {}, index: number, array: {}[]) => Element'.
2. Argument of type '(x: PayloadItemInterface, id: number) => Element' is not assignable to parameter of type '(value: {}, index: number, array: {}[]) => Element'. Types of parameters 'x' and 'value' are incompatible. Property 'login' is missing in type '{}' but required in type 'PayloadItemInterface'.

What I understand from the error, it complains about react component that I believe needs to be typed? If so, any idea how to solve this?

and secondly, I think it still complains about login property, which I thought I have specified using interface PayloadItemInterface. Any comments about this?

fyi, each object in array should have this property:

 {
        "login": "foo",
        "id": 1,
        "node_id": "MDQ6",
        "avatar_url": "https://foo",
        "gravatar_id": "",
        "url": "https://api.github.com/users/foo",
        "html_url": "https://github.com/mojombo",
        "followers_url": "https://api.github.com/users/foo/followers",
        "following_url": "https://api.github.com/users/foo/following{/other_user}",
        "gists_url": "https://api.github.com/users/foo/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/foo/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/foo/subscriptions",
        "organizations_url": "https://api.github.com/users/foo/orgs",
        "repos_url": "https://api.github.com/users/foo/repos",
        "events_url": "https://api.github.com/users/foo/events{/privacy}",
        "received_events_url": "https://api.github.com/users/foo/received_events",
        "type": "User",
        "site_admin": false
    }

Please again, help. Thank you.

Answer 1

This error is happening because TypeScript is having trouble inferring the type of the objects in the payload array. You are assuming that payload is an array of PayloadItemInterface, but TypeScript is assuming it's an array of empty objects ({}).

To fix this, you could type searchPayload when destructuring it from SearchPage. This is assuming searchPayload is supposed to have a payload property that is an array of PayloadItemInterface.

interface PayloadItemInterface {
    login: string
}

interface SearchPayload {
  payload: PayloadItemInterface[];
}

const QueriesAccordion=()=>{
  const SearchPage = useContext(SearchPageContext);
  const {searchPayload} : {searchPayload: SearchPayload} = 
SearchPage;

  const {payload} = searchPayload;