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>
The syntax of
MenuItem
in the conditional rendering block looks incorrect. You may want to change it to the following: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.