Conditional Element Redering

[s1n7ax]

In React I can render a component based on a condition with Logical && Operator.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  return (
    <div>
      <h1>Hello!</h1>

      { unreadMessages.length > 0 &&  
          <h2>
            You have {unreadMessages.length} unread messages.
          </h2>      
      }    

    </div>
  );
}

Is there similar option in Leptos? May be something like fragment so we can use it in else condition?

https://react.dev/reference/react/Fragment

[gbj]

Have you read the Control Flow chapter of the docs?

[s1n7ax]

For anyone looking for a code,

Logo is option.

logo: Option<string>

Option.map can return be used to return Fn() -> Option<_> which can be used inside view directly.

let image = move || {
logo.map(|url| {
	view! {
		<Image
			width=100
			height=100
			class=styles::image
			quality=85
			blur=true
			src=url
			alt=logo_alt.unwrap_throw()
		/>
	}
})
};

[gbj]

In your case, remove the closure -- this is not reactive, and Option<T> implements IntoView if T: IntoView.