JIYIK CN >

When we try to return an array of elements from a function component, a React.js error “Type '() => JSX.Element[]' is not assignable to type FunctionComponent” occurs. To fix this error, you need to wrap the array of elements in a React fragment.

Below is sample code that produces the error.

import React from 'react';

// ⛔️ Type '() => JSX.Element[]' is not assignable to type 'FunctionComponent<{}>'.
// Type 'Element[]' is missing the following properties
// from type 'ReactElement<any, any>': type, props, key ts(2322)

const App: React.FunctionComponent = () => {
  return ['Alice', 'jiyik.com'].map(element => <div key={element}>{element}</div>);
};

export default App;

This is perfectly valid React.js code, as we should be able to return an array from a function component in React. However, FunctionComponentthe return type of the interface is ReactElement or null .

This means we can only return a React element or a null value.

To avoid type errors, we have to wrap the array into a React fragment.

import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <>
      {['Alice', 'jiyik.com'].map(element => (
        <div key={element}>{element}</div>
      ))}
    </>
  );
};

export default App;

It is used when we need to group a list of elements without adding extra nodes to the DOM Fragment.

We may also see a more verbose syntax in use Fragment.

import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <React.Fragment>
      {['Alice', 'jiyik.com'].map(element => (
        <div key={element}>{element}</div>
      ))}
    </React.Fragment>
  );
};

export default App;

The two examples above achieve the same result—they group a list of elements without adding extra nodes to the DOM.

Another solution is to wrap the array of elements in another DOM element, such as a div.

import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <div>
      {['Alice', 'jiyik.com'].map(element => (
        <div key={element}>{element}</div>
      ))}
    </div>
  );
};

export default App;

This still complies with FunctionComponentthe return type specified in the interface, since our component returns a single React element.