Using tel: protocol with dynamic phone numbers in mapped array from Sanity

This is a JSX templating syntax issue. You need to use template literals or string concatenation to properly interpolate the phone number variable.

Change this:

<a href="tel:{item.phone}">Call Person</a>

To this:

<a href={`tel:${item.phone}`}>Call Person</a>

Your complete map should look like:

{array.map((item) => (
  <a key={item._id} href={`tel:${item.phone}`}>Call Person</a>
))}

The key points:

• Use template literals (backticks) with ${item.phone} to interpolate the variable
• The entire href value should be wrapped in curly braces {}
• Add a key prop (using item._id or another unique identifier) to avoid React warnings
• Use parentheses () instead of curly braces for implicit return in your arrow function

Since you're pulling data from Sanity via GraphQL, just make sure your phone field is included in your GraphQL query and the data structure matches what you're accessing.