Error when passing links as a prop to Gatsby Link

Question

In my Gatsby JS website, I created this component to which I'm trying to pass an array of links to Link, as a prop.

        ...
            {props.features.map((feature, idx) => (
              <div className="column is-4 has-text-centered">
                <div
                  className="content bordered"
                  style={{ width: '100%', height: '100%' }}
                >
                  <div className="title is-4">
                    {props.featureTitle[idx]}
                  </div>
                  <p>{props.featureDesc[idx]}</p>
                  {props.featureButton && (
                    <Link
                      className="button is-success is-medium"
                      to={props.featureButtonLink[idx]}
                    >
                      {props.featureButton[idx]}
                    </Link>
                  )}
                </div>
              </div>
            ))}
        ...

In the page where this component is used, I'm also using i18n to add translations, like this:

        <ComponentA
          features={[1, 2, 3, 4, 5, 6]}
          featureTitle={[
            <>{t('about.feature1')}</>,
            <>{t('about.feature2')}</>,
            <>{t('about.feature3')}</>,
            <>{t('about.feature4')}</>,
            <>{t('about.feature5')}</>,
            <>{t('about.feature6')}</>,
          ]}
          featureDesc={[
            <>{t('about.feature1desc')}</>,
            <>{t('about.feature2desc')}</>,
            <>{t('about.feature3desc')}</>,
            <>{t('about.feature4desc')}</>,
            <>{t('about.feature5desc')}</>,
            <>{t('about.feature6desc')}</>,
          ]}
          featureButton={[
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
            <>{t('about.featureButton')}</>,
          ]}
          featureButtonLink={[
            <>{t('about.featureButtonLink1')}</>,
            <>{t('about.featureButtonLink2')}</>,
            <>{t('about.featureButtonLink3')}</>,
            <>{t('about.featureButtonLink4')}</>,
            <>{t('about.featureButtonLink5')}</>,
            <>{t('about.featureButtonLink6')}</>,
          ]}
        />

And then, in the English locale file I have:

"about": {
    "feature1": "Business Development",
    "feature1desc": "BD description",
    "feature2": "Microeconomics",
    "feature2desc": "Microeconomics description",
    "feature3": "Market Research",
    "feature3desc": "Market Research description",
    "feature4": "Industrial Engineering",
    "feature4desc": "IE description",
    "feature5": "Business English",
    "feature5desc": "BE description",
    "feature6": "Marketing",
    "feature6desc": "Marketing Description",
    "featureButton": "Discover",
    "featureButtonLink1": "/business-dev",
    "featureButtonLink2": "/micro",
    "featureButtonLink3": "/market",
    "featureButtonLink4": "/industrial-eng",
    "featureButtonLink5": "/business-english",
    "featureButtonLink6": "/marketing"
  },

The aim would be to customise everything, including the links, for each locale.

However, while this works well with most of the props I pass to the component (arrays included), it does not work for the prop I pass to Link.

The link I get is of this kind, like it's not fetching the array content:

http://localhost:8000/[object%20Object]

Do you have an idea of why it's not taking up the array I'm passing to it? Is there something I should do differently to achieve this?

Thanks a lot.

Answer 1

You are passing a component into the to prop in the Gatsby <Link/> component.

You need to remove the <>, </> and the braces from the featureButtonLink array.

<ComponentA
    ...
    featureButtonLink={[
        t('about.featureButtonLink1'),
        t('about.featureButtonLink2'),
        t('about.featureButtonLink3'),
        t('about.featureButtonLink4'),
        t('about.featureButtonLink5'),
        t('about.featureButtonLink6'),
    ]}
/>)

I believe the to prop only takes a string value