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

React components cannot render (or return for functional components) as arrays, which is what you have currently. You can update your code to return the a tags within a React.Fragment, which is basically what you're after but is allowed.

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>
  )
};

Note also that you can use the syntax

<>
  { websiteElements }
</>

instead of <React.Fragment> if you prefer.


The error is about returning an array of JSX elements which is not a valid return type from a component.

You must return a single node, all you have to do is wrap it inside a fragment <></> or a <div></div> etc...

Also you don't need to type props parameter again

const SocialList: React.FC<Props> = ({ websites }) => (
  <>
    {websites.map(({ name, src, url }) => (
      <a key={name} href={url}>
        <img src={src} />
      </a>
    ))}
  </>
);