JSX Element type 'void' is not a constructor function for JSX elements [duplicate]

Question

What am I doing wrong here?

It doesn't like the way I am calling Items

import React, { Component } from 'react'; import { Link } from "react-router-dom";  interface LinkedItemProps {     icon: string;     title: string; }  export const Items = ({icon, title}: LinkedItemProps) => {     <div>         <div className="nav-menu-link-icon">             {icon}         </div>         <div className="nav-menu-link-label">             {title}         </div>     </div> }  export default class LinkedItems extends React.Component<any, any> {     render() {         return (             <Link                 to={this.props.link}                 title={this.props.title}                 onClick={this.props.afterClick}             >                 <Items icon={this.props.icon} title={this.props.title} /> //error             </Link>     )} } 

P.S. Thank you Shubham Khatri for marking this as a duplicate of a question that does not remotely resemble what I asked.

Answer 1

Items is an arrow function with {} which means you have to explicitly give it a return statement:

export const Items = ({icon, title}: LinkedItemProps) => {   return ( // <------ must return here     <div>       <div className="nav-menu-link-icon">         {icon}       </div>       <div className="nav-menu-link-label">         {title}       </div>     </div>   ) } 

If you do not, then the Items just returns undefined which is an empty value and thus

JSX Element type 'void' is not a constructor function for JSX elements" 

For a bit cleaner code, you can replace the {} with () completely:

export const Items = ({icon, title}: LinkedItemProps) => (    <div>     <div className="nav-menu-link-icon">       {icon}     </div>     <div className="nav-menu-link-label">       {title}     </div>   </div> )