🏠 back to Observable

how to make htm work with Inline `If` with Logical `&&` Operator?

I am implementing an example in notebook from React tutorial on conditional rendering with if and && operator. I am usinghtm inside another htm, maybe it is why it is not working, I am not sure.

The example in notebook is right here

The problem is illustrated in the image below

Could anyone help me out on this? Thanks!

The problem is where you call ReactDOM.render:

 ReactDOM.render(
-  htm`<${Mailbox} unreadMessages={messages} />`,
+  htm`<${Mailbox} unreadMessages=${messages} />`,
   root
 );

You’re missing the $ sign, which means that unreadMessages will be the string {messages}, which is 10 characters long, rather than the actual message list.

2 Likes

Thank you so much!

can’t believe I still missed the $ after looking at the code for 30 minutes. :sweat:

I guess write it in a separate line will be easier to debug the problem

  const element = htm`<${Mailbox} unreadMessages=${messages} />`; // easier to debug