Conditionally render elements based on data in functional component

Question

I have a functional component in my React app that makes an API call and gets back a response featuring two contact methods Phone Number and Email and displays them next to their respective icon.

Some responses may only have one or the other contact method or neither.

In the event that a response doesn't have a contact method listed I still want to display the icon and place '--' where the data would be.

Here's my first pass at the logic where I tried writing out a few quick ternary methods, but right now all that renders on each row is [object Object][object Object]

  let renderContactDetails = methods.map(method => {

    return (
      <div>
        {
          method.contactMethodType === "M" ? `${<span><PhoneSvg /> {method.number}</span>}` : `${<span><PhoneSvg /> -- </span>}`
        }
        {
          method.contactMethodType === "E" ? `${<span><AtSymbolSvg /> {method.emailAddress}</span>}` :  `${<span><AtSymbolSvg /> -- </span>}`
        }
      </div>
    );
  });

Any suggestions?

Answer 1

You only need to define JavaScript inside template literals and let JSX convert the html tags for you like this:

let renderContactDetails = methods.map(method => {

const number = method.contactMethodType === "M" ? `${method.number}` : `--`;
const email = method.contactMethodType === "E" ? `${method.emailAddress}` : `--`;
    
    return (
      <div>
        <span><PhoneSvg /> {number}</span>
        <span><PhoneSvg /> {email}</span>
      </div>
    );
});