Type ‘(props: Props) => Element[]’ is not assignable to type ‘FunctionComponent’

Your SocialList component renders multiple nodes. While this behavior is supported in React version >=16.0, it is not allowed by the type declarations for React (@types/react). In other words, you can render multiple nodes in JS React (v16+), but not in TS React. For JS React, see the related question: Return multiple elements inside React.render().

To fix this, you have a few options: either update your component so that it only returns a single node, use a type assertion, or disable the error from TypeScript.

Returning a Single Node

You can update your code to return the a tags within a containing element. The default used to be to use div, but this clutters the DOM. Instead you can use the React.Fragment component, which does not render anything to the actual DOM, and is therefore basically what you’re after.

Example:

const SocialList: React.FC<Props> = (props: Props) => {
  const { websites } = props;

  const websiteElements = websites.map((website) => {
    const { name, src, url } = website;

    return (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    );
  });

  return (
    <React.Fragment>
      {websiteElements}
    </React.Fragment>
  )
};

You can also use the short syntax for fragments as below if you prefer:

<>
  {websiteElements}
</>

Type Assertion

You can assert the type of the return value to be any, which will cause the type error to be ignored. This will, however, conflict with the eslint rule no-explicit-any if you have that enabled (which is a rule I disagree with). Anyway I don’t recommend this approach because you should try to avoid as any as much as possible (and here it is possible to avoid).

Example:

const SocialList: React.FC<Props> = (props: Props) => {
  const { websites } = props;

  return websites.map((website) => {
    const { name, src, url } = website;

    return (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    );
  }) as any;
};

Disable the Error

Since the error is just due to the type declarations from @types/react you can suppress the TS error by putting // @ts-ignore above the errored line. You could try to find a more specific error to ignore, but I couldn’t find it for this case, so be careful as this will ignore all TS errors on that line (e.g. if Props accepts a type param but is not given one).

I don’t recommend this approach because disabling TS errors should be avoided as much as possible, and from the TypeScript docs:

Please note that this comment only suppresses the error reporting, and we recommend you use this comments very sparingly.

Example:

// @ts-ignore
const SocialList: React.FC<Props> = (props: Props) => {
  const { websites } = props;

  return websites.map((website) => {
    const { name, src, url } = website;

    return (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    );
  });
};