📆 Don't miss our Sanity Showcase virtual meetup on March 20th!

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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to turn PortableText into plain text in Javascript?Dec 7, 2020
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Error: unable to resolve image URL from source (undefined)Sep 11, 2022
How to Disallow Robots on a SubdomainNov 12, 2020
Adding a ref to the body tag using Helmet in ReactJul 2, 2020
Error when deploying Next.js + Sanity project to Vercel with Lerna and React-IconsJan 21, 2021
Hello all! I’m trying to render a code block in a Portable Text Block, followed the instructions to add the serializer and...Feb 3, 2021
Best practices for using image sizes in React projects with Sanity.ioMay 21, 2020
How do I render the image in Sanity blockcontent into a custom image component?Nov 28, 2020
Tips for using block-content-to-react in a Gatsby app with GraphQL dataApr 24, 2020

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle