🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Trouble with syntax for using the "tel:" protocol in a map method in React

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.
May 7, 2021, 1:17 PM
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.
May 7, 2021, 1:49 PM
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.
May 7, 2021, 1:53 PM
Adding the “return” seems a good start. You can see the issue in these examples:
May 7, 2021, 2:14 PM
So you need the return or no braces.
May 7, 2021, 2:14 PM
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.
May 7, 2021, 2:20 PM
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
. 🙌
May 7, 2021, 2:28 PM
Got it. Thanks User and User! I think that solves the question. I’ll try it out and ensure it works.
May 7, 2021, 3:20 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?