How to href Link only one element of a .map array inside JSX

Question

I just want to have a link for id = 0, and no hyperlinks for the rest of the elements in the projects array. Can someone please help, thanks :)

const Projects = () => (
  <Section nopadding id="projects">
    <SectionDivider />
    <SectionTitle main>Projects</SectionTitle>
    <GridContainer>
      {projects.map(({ id, image, title, description, tags, source, visit }) => (
        <BlogCard key={id}>
          <Img src={image} />
          <Link href="/campaigns"> 
          <TitleContent>
            <HeaderThree title>{title}</HeaderThree>
            <Hr />
          </TitleContent>


............

...........
);

score 0 · Accepted Answer · answered Jul 20 '21 at 05:17

0

Try the below solution

<GridContainer>
  {projects.map(({ id, image, title, description, tags, source, visit }) => {
    const linkProps = id === 0 ? { href: "/campaigns" } : {}
    return (
      <BlogCard key={id}>
        <Img src={image} />
        <Link {...linkProps}>
          <TitleContent>
            <HeaderThree title>{title}</HeaderThree>
            <Hr />
          </TitleContent>
        </Link>
      </BlogCard>
    )
  })}
</GridContainer>

answered Jul 20 '21 at 05:17

Thanks for your reply, I'm getting "Identifier expected, const is a reserved word that cannot be used here". – Miller42 Jul 20 '21 at 05:30
In my example you should not have any errors, can you show your current code? – Jul 20 '21 at 05:41
Same as yours just getting that error it's not letting me declare a linkProps variable there – Miller42 Jul 20 '21 at 05:43
I think you think your code is like mine, maybe you miss something. – Jul 20 '21 at 05:57
To prove the are no errors you can look here https://ibb.co/WDNnFNZ. Can you share your IDE as well, so with additional pair of eyes we can solve your issue – Jul 20 '21 at 05:58
Ohh, you have an outdated eslint config. Please look here https://stackoverflow.com/questions/42706584/eslint-error-parsing-error-the-keyword-const-is-reserved – Jul 20 '21 at 06:00
https://ibb.co/vcM08Yf Here is my screenshot thanks for your replies btw – Miller42 Jul 20 '21 at 06:27
Yes, looks correct, then like I replied in the previous comment you need to update the eslint config. – Jul 20 '21 at 06:32
So if my answer was helpful then please give me a like / plus :D – Jul 20 '21 at 06:33
Maybe your IDE is caching the eslint result, try to close it and open it again. – Jul 20 '21 at 07:11
I've tried everything to fix the eslint, still get those errors, is there another way to solve the problem? – Miller42 Jul 20 '21 at 09:00
Are you using CRA? If yes, then just upgrade to the latest version. – Jul 20 '21 at 09:50
If it is too hard to fix that problem just use `var` instead of `const` – Jul 20 '21 at 09:51
That didn't work either, I just ended up making another projects item in the array called "href" and then added javascript:void(0) to all of the ones I didn't want a link for. Seems to work. I gave you a like for trying to help me, thanks :) – Miller42 Jul 20 '21 at 10:24

score 0 · Answer 2 · answered Jul 20 '21 at 05:33

if you need that link even without herf use this code

 <GridContainer>
      {projects.map(({ id, image, title, description, tags, source, visit }) => {
        const linkProps = id === 0 ? { href: "/campaigns" } : {href: ""}
        return (
          <BlogCard key={id}>
            <Img src={image} />
            <Link {...linkProps}>
              <TitleContent>
                <HeaderThree title>{title}</HeaderThree>
                <Hr />
              </TitleContent>
            </Link>
          </BlogCard>
        )
      })}
    </GridContainer>

if you don't need that link it doesn't have href use this code

<GridContainer>
      {projects.map(({ id, image, title, description, tags, source, visit }) => {
        const linkProps = id === 0 ? { href: "/campaigns" } : ''
        return (
          <BlogCard key={id}>
            <Img src={image} />
           {linkProps!=''&& <Link {...linkProps}>
              <TitleContent>
                <HeaderThree title>{title}</HeaderThree>
                <Hr />
              </TitleContent>
            </Link>}
          </BlogCard>
        )
      })}
    </GridContainer>

Sometimes you want to have a link to display the title and keep the same styles. From a semantic and UX perspective, you are right, cause if something is not a link it should not look like a link. — , Jul 20 '21 at 06:04

How to href Link only one element of a .map array inside JSX

2 Answers2