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

Community Help
1

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

Screen Shot 2019-12-16 at 12.19.19 AM
Screen Shot 2019-12-16 at 12.19.19 AM1966Ă—1280 229 KB

Could anyone help me out on this? Thanks!

2

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
3

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