Does Hydro support conditional rendering?

[hmanbr]

I'm looking for a way to do conditional rendering similar to Angular. If it's possible can someone give me an example? Thanks

//Angular code, if isEditing is true it will render #editTemplate
<div>
  <ng-container *ngIf="!isEditing; else editTemplate">
    <p>{{ text }}</p>
    <button (click)="editText()">Edit</button>
  </ng-container>

  <ng-template #editTemplate>
    <input [(ngModel)]="text" type="text">
    <button (click)="saveText()">Save</button>
  </ng-template>
</div>

[GiuseppeSpathis]

I think hydro is based on React, this is the code of conditional rendering in react

import React, { useState } from 'react';

const TextEditor = () => {
const [isEditing, setIsEditing] = useState(false);
const [text, setText] = useState('Your initial text');

const editText = () => {
setIsEditing(true);
};

const saveText = () => {
setIsEditing(false);
};

return (

{/* If isEditing is false, show the text and the edit button, else show the input field and save button */}
{!isEditing ? (
<>

{text}

Edit
</>
) : (
<>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
/>
Save
</>
)}

);
};

export default TextEditor;

[honkhonk-uk]

Hi all, please have a read at this:
https://usehydro.dev/introduction/motivation.html

[kjeske]

@hmanbr Hydro uses Razor syntax, so you can use if statement. Here you can read more about that.