Typescript & React - Render a component throws an error

Question

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?

Todd Skelton · Accepted Answer · 2020-09-02 15:59:41Z

3

You need to use tags to pass the component.

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

answered Sep 2, 2020 at 15:59

Todd Skelton

7,2873 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lolamer Over a year ago

Thanks a lot! I missed that.. 🙏🏻

Collectives™ on Stack Overflow

Typescript & React - Render a component throws an error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related