How to render a function parameter

[jbbcst]

Hi,

I am a new user of Preact, I am trying to render a function parameter like this:

function MyFunction({icon, text, color}) {
    return(
      <span class={`... ${color} `}>    
      {icon && <{icon} class="w-5 h-5"/>}
      <span class="...">{text}</span>
      </span>
   )
};

This line doesn't work {icon && <{icon} class="w-5 h-5"/>}, could you please help me?

[marvinhagemeister]

JSX expects an identifier there and the name must start with an uppercase character to be detected as a component.

  function MyFunction({icon, text, color}) {
+   // Uppercase name so that transpiler can detect that it's a component
+   const IconComponent = icon;
+
     return(
       <span class={`... ${color} `}>    
-       {icon && <{icon} class="w-5 h-5"/>}
+       {IconComponent && <IconComponent class="w-5 h-5"/>}
       <span class="...">{text}</span>
       </span>
     )
  };

[jbbcst]

Great, thanks a lot!