Why use this syntax `{": "}` in React instead of just writing a colon

I saw this code snippet on the React dev page (https://react.dev/reference/react/memo#updating-a-memoized-component-using-state):

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Why do they use this Name{': '} instead of just writing Name: ? Does a colon have some special meaning that it has to be escaped? If it's because of the space after the colon to avoid writing   why then not just put the whole text in the braces like this {'Name: '}?

Why do they use this Name{': '} instead of just writing Name: ?

It is because of the way React uses JSX and how JSX transpiles to HTML markup and the fact that HTML basically ignores whitespace (emphasis mine).

In the case of HTML, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored.

Consider your markup:

    <>
      <label>
        Name{': '}|---------------->
<------|<input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>

Everything from |----------------> to <------| is whitespace in the HTML markup and ignored by the browser when rendering.

If you had instead used:

    <>
      <label>
        Name: |---------------->
<------|<input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>

That space after "Name:" is ignored along with all the rest of the line and the next line until the next token it reached.

Does a colon have some special meaning that it has to be escaped?

No, not at all.

If it's because of the space after the colon to avoid writing   why then not just put the whole text in the braces like this {'Name: '}?

{'Name: '} works as well.

<label>
  {"Name: "}
  <input value={name} onChange={(e) => setName(e.target.value)} />
</label>

But the standard convention is to simply use {" "} where you need to keep a space at the beginning or end of a line.

<label>
  Name:{" "}
  <input value={name} onChange={(e) => setName(e.target.value)} />
</label>

In my editor when I try the above, it actually get auto-formatted to a single line, but the address markup still needs it.

<label>
  Name: <input value={name} onChange={(e) => setName(e.target.value)} />
</label>
<label>
  Address:{" "}
  <input value={address} onChange={(e) => setAddress(e.target.value)} />
</label>