Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Type 'Element[]' is not assignable to type 'ReactElement<any>'

Tags:

dom

css

reactjs

tsx

I'm trying to add this simple div to the return block of my .tsx file:

<div id="bizible.reportUser" style="display:none" data-email="[email protected]"/>

I do it the following way:

import React from 'react';
import Radium from 'radium';

import Icon from './Icon';
import Header from './Header';

import Colors from '../colors';

const NoMatch = ({ children, title, icon, kind }) => {
  return ([
    <div style={[styles.base, kind && styles[kind]]}>
      <Icon name={icon} style={[styles.icon]} height="48" width="48" />
      <Header title={title} style={[styles.header]} />
      <p style={[styles.message]}>
        {children}
      </p>
    </div>,
    <div id="bizible.reportUser" style="display:none" data-email="[email protected]"/>
  ]
  );
};

But it returns an Error message and does not compile:

error TS2322: Type '({children, title, icon, kind}: { children: any; title: any; icon: any; kind: any; }) => Element[]' is not assignable to type 'StatelessComponent<Props>'.
  Type 'Element[]' is not assignable to type 'ReactElement<any>'.
    Property 'type' is missing in type 'Element[]'.
like image 857
ntonnelier Avatar asked Jun 29 '18 19:06

ntonnelier


People also ask

Is not assignable to type FunctionComponent?

Element[]' is not assignable to type FunctionComponent" occurs when we try to return an array of elements from a function component. To solve the error, wrap the array of elements into a React fragment.

Is not assignable to type string function?

The "Type 'string | null' is not assignable to type string" error occurs when a possibly null value is assigned to something that expects a string . To solve the error, use a non-null assertion or a type guard to verify the value is a string before the assignment.

Is not assignable to type void?

The "Type 'void' is not assignable to type" TypeScript error occurs when we forget to return a value from a function, so the function gets an implicit return type of void . To solve the error, make sure you return a value of the correct type from your functions before the assignment.

What is React Reactelement?

React Element: It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property. It may contain other Elements in its props. React Element does not have any methods, making it light and faster to render than components.


1 Answers

You can always wrap the return value with <React.Fragment> (or <>). This will solve your problem without adding anything to the DOM.

like image 199
Guy Engel Avatar answered Nov 12 '22 18:11

Guy Engel