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

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:

This is pulling in data using GraphQL from Sanity.

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:

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.

Some docs here: https://reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx
And some good examples of using map here:


https://reactjs.org/docs/lists-and-keys.html

Some docs here: https://reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx
And some good examples of using map here:


https://reactjs.org/docs/lists-and-keys.html

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 . 🙌

Got it. Thanks User and User! I think that solves the question. I’ll try it out and ensure it works.