2

I would like to pass material UI icons from Sidebar.js to SidebarOption. The idea is to display sidebar options in sidebar passing in different MUI icons.

Sidebar.js

import React from "react";
import TwitterIcon from "@material-ui/icons/Twitter";
import SidebarOption from "./SidebarOption.js";

function Sidebar() {
  return (
    <div>
      <SidebarOption Icon={TwitterIcon} text="Home" />
    </div>
  );
}

export default Sidebar;

SidebarOption.js

import React from "react";

function SidebarOption({ text, Icon }) {
  return (
    <div>
      <Icon />
      <h2>{text}</h2>
    </div>
  );
}

export default SidebarOption;

I got the error below. Icon is the problem. text works fine..

error message

jazzfaz
  • 143
  • 1
  • 10

2 Answers2

4

Try passing it as <SidebarOption Icon={<TwitterIcon />} text="Home" /> and using it as {Icon} in SidebarOption.js

SD33N
  • 88
  • 7
  • wow! it works! but any clue why this works. my way doesn't work? (i copied it from the tutorials) – jazzfaz Jun 04 '21 at 13:13
  • Thats literally the comment I places from which you said it didn't work ;) – 0stone0 Jun 04 '21 at 13:14
  • sorry!. i didn't realize it has to be called using {Icon}, i only changed the first half...any clue why my way doesn't work? @0stone0 – jazzfaz Jun 04 '21 at 13:17
  • Ahh sorry, should have included that in my comment. You weren't passing the component, but using the props like it was. Now you're just passing the component, and using the prop as it's given. The marked duplicate seems exact like your question. Please consider marking as dupplicate. – 0stone0 Jun 04 '21 at 13:21
  • Works for me !! – Neel gorasiya Jan 07 '22 at 16:29
0

Your code looks fine to me. Make sure the peer dependencies for @material-ui/icons are installed: specifically, check for @material-ui/core, which is where that Twitter component comes from.

jsejcksn
  • 27,667
  • 4
  • 38
  • 62