Get help on Discord

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

9 replies
Last updated: May 7, 2021
Hey all, I'm having trouble figuring out the syntax needed for this. I need to use the <a href="tel:"> protocol to pull in the relevant numbers within a map method, so the code looks a bit like this:

{array.map((item) => {
   <a href="tel:{item.phone}">Call Person</a>
})}
This is pulling in data using GraphQL from Sanity.
AI Update

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.

Show original thread
9 replies
Hi User. Your map doesn’t have a return so perhaps that’s the issue you’re having. You could explicitly use the return keyword, change the inner 
{ }
to parentheses, or just bring the JSX line (
<a> … </a>
) onto the same line as the 
=>
. Another potential problem would be if 
item.phone
is not in a format that 
tel:
likes.
On a separate note, you could also use optional chaining (
item?.phone
) to prevent a potential 
item is not defined
error.
If I’m on the wrong track, please let us know what trouble you’re having.
Thanks for responding User! In my actual code I do have a function setup for the page:

export default function Page({ data }) {
   const array = data.array.nodes;
return (
   {array.map((item) => {
   <a href="tel:{item.phone}">Call Person</a>
   })}
);
}
I was just trying to keep it simple. I know the {item.phone} part is definitely wrong, I just cant find how to properly reference it within the map to pull each number in turn. If that makes sense.
Adding the “return” seems a good start. You can see the issue in these examples:
So you need the return or no braces.
Then to set the href you need to use something like href={“tel:” + item.phone} or href={
tel:${item.phone}
}. Inside attributes you have to use a regular JavaScript expression of some sort.
Then to set the href you need to use something like href={“tel:” + item.phone} or href={
tel:${item.phone}
}.
I glossed right over that part. Yes, thank you
user F
. 🙌
Got it. Thanks User and User! I think that solves the question. I’ll try it out and ensure it works.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?