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[]'.
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.
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.
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.
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.
You can always wrap the return value with <React.Fragment>
(or <>
). This will solve your problem without adding anything to the DOM.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With