CODEWITHSUNDEEP
javascriptreactjstypescript
Lolamer
Lolamer

Reputation: 13

Typescript & React - Render a component throws an error

I'm trying to inject an icon from UI material to another component and render it but it throws an error

import InsertCommentIcon from "@material-ui/icons/InsertComment";

const Siderbar = () => {
  return (
      <SidebarOption icon={InsertCommentIcon} title="Threads" />
  );
};

export default Siderbar;

import React from "react";
import "./SidebarOption.css";

interface SidebarOptionProps {
  icon?: React.ReactNode;
  title: string;
  id?: string;
}



const SidebarOption: React.FC<SidebarOptionProps> = ({ icon, title, id }) => {
  return (
    <div className="sidebarOption">

      {icon ? (
        <h3> {icon}{title}</h3>
      ) : (
          <h3 className="sidebarOption__channel">
            <span className="sidebarOption__hash">#</span>
            {title}
          </h3>
        )
      }
    </div >
  );
};

export default SidebarOption

The error message:

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, displayName, muiName}). If you meant to render a collection of children, use an array instead.
    in h3 (at SidebarOption.tsx:15)
    in div (at SidebarOption.tsx:12)
    in SidebarOption (at Sidebar.tsx:50)
    in div (at Sidebar.tsx:39)

It's possible to do it in React but I'm quite new with typescript.

Any clue?

Upvotes: 1

Views: 347

Answers (1)

Todd Skelton
Todd Skelton

Reputation: 7239

You need to use tags to pass the component.

 <SidebarOption icon={<InsertCommentIcon />} title="Threads" />

Upvotes: 3

Related Questions