Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState } from 'react';

function DynamicContent() {
  const [isActive, setIsActive] = useState(false);
  const [count, setCount] = useState(3);

const items = ['React', 'Vue', 'Angular'];
  const today = new Date().toLocaleDateString();

return (
    <div>
      {/* String expression */}
      <p>Today is {today}</p>

{/* Arithmetic */}
      <p>Double count: {count * 2}</p>

{/* Function call */}
      <p>Upper: {items[0].toUpperCase()}</p>

{/* Ternary for conditional text */}
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>

{/* Dynamic className */}
      <button
        className={isActive ? 'btn btn-active' : 'btn'}
        onClick={() => setIsActive(a => !a)}
      >
        Toggle
      </button>

{/* Rendering an array */}
      <ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>

{/* null / false are silently ignored */}
      {false && <p>This never renders</p>}
      {null}
      {count > 10 && <p>Big number!</p>}
    </div>
  );
}

export default DynamicContent;