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