What's wrong with this React conditional rendering expression?

Question

I have the following Reactjs snippet in my UI, which is working fine now.

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            {contact.name} - {contact.phone}
                        </MenuItem>
                    ))}
                </Select>

I don't want the contact.phone field to be displayed when it is an empty string.

I try to implement conditional rendering like this:

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            {contact.contactId != 'other' 
                                ? {contact.name} - {contact.phone}
                                : {contact.name}
                            }
                        </MenuItem>
                    ))}
                </Select>

But it gives "The right-hand side of an arithmetic operation must be of type "any", "number", "bigint", or an enum type. " error on contact.phone fields. I also tried the following code snippet (same as above but without the curly braces), but it dumps the entire JS line as a string on the UI.

<Select
                    label="Send To"
                    labelId="send-to-label"
                    required
                    error={state.submitted && !state.sendTo}
                    fullWidth
                    placeholder="Select contact"
                    id="send-to"
                    value={state.sendTo ? state.sendTo.contactId : ''}
                    onChange={selectSendToChanged}
                    MenuProps={{ classes: { paper: 'contactMenuList' } }}
                >
                    {state.sendToContacts.map((contact: Contact) => (
                        <MenuItem key={contact.contactId} value={contact.contactId}>
                            contact.contactId != 'other' 
                                ? {contact.name} - {contact.phone}
                                : {contact.name}
                        </MenuItem>
                    ))}
                </Select>

Answer 1

The syntax of MenuItem in the conditional rendering block looks incorrect. You may want to change it to the following:

<MenuItem key={contact.contactId} value={contact.contactId}>
  {contact.contactId != 'other' 
    ? `${contact.name} - ${contact.phone}`
    : contact.name}
</MenuItem>

This is because anything inside the curly braces will be interpreted as a JS expression, so your conditionally rendered version is equivalent to "John" - "" or "John" - "555 -555-5555”. Wrapping the string to be rendered in a template string avoids trying to evaluate it as an expression.