[vlasev]

    {name}{confirmation}{request}

is basically a hidden render loop. If you had something like

    const inputs = [name, confirmation, request]

and rendered that via inputs.map() (or just {inputs}), it would have complained about the missing key prop. React can't seem identify which state belongs to which item in the "iteration".

Using a conditional render like

   {nameInput}
   {isBob ? confirmationInput : null}
   {requestInput}

seems to avoid the issue as well, without using a key prop. So yeah, beware of hidden loops.

[arcturus17]

Yea, I was startled by the issue at first, but once I checked it in more detail it took me like 5min to figure out what was going on.

I'll grant the particular example or edge case is not available in the public docs, but it's extremely easy to intuit what is happening and relate it to the requirement of list components needing keys.

Like I replied to OP, you would be in all likelihood using arrays anyway, instead of this contrived pattern.