Saying hello

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

const [activeName, setActiveName] = null;
<span>Hello {activeName ?? 'World'}!</span>
<button onClick="setActiveName('Alice')">Alice</button>
<button onClick="setActiveName('Bob')">Bob</button>

'use client';
import { useState } from 'react';
import { User } from 'lucide-react';

export default function Home() {
  const [activeName, setActiveName] = useState(null);
  return (
    <div className='flex flex-col gap-4'>
      <span className='text-blue-700 text-2xl font-semibold'>Hello {activeName ?? 'World'}!</span>
      <div className='flex gap-4'>
        <button
          onClick={() => setActiveName('Alice')}
          className='bg-blue-500 text-white px-4 py-2 rounded inline-flex justify-center items-center gap-2'>
          <User size={16} />
          Alice
        </button>
        <button
          onClick={() => setActiveName('Bob')}
          className='bg-blue-500 text-white px-4 py-2 rounded inline-flex justify-center items-center gap-2'>
          <User size={16} />
          Bob
        </button>
      </div>
    </div>
  );
}

- We have a new data store called `activeName`.
- We have the initial value of `activeName` set to `null`. Imagine 'null' as 'empty' or 'nothing'.
- `{activeName ?? 'World'}` We are displaying `Hello World!` when `activeName` is 'null' or 'empty'.
- You can write `{cartCount ?? <span>No items in cart</span>}` to show empty cart message when `cartCount` is 'null' or 'empty' or '0'.
- `setActiveName('Alice')` We are setting a text instead of a number to `activeName`.