How to display link in validation as part of string?

Mile Mijatović 0
Viewed 31

I have USM-Registration.json file for english, german and which is file for translation React app.

USM-Registration.json

  "ResponseError": {
     "error": {
        "already.exists": "Social security number already exists. Please login at {{link}}."
      },
    },

Note that I have {{link}} which will be dynamically provided but I have an issue with that.

I am using formik and validation with yup but I am unable to pass link as part of string, but when I provide string, works ok.

How to parse that link and display it properly?

 import { useTranslation } from 'react-i18next'

  const { t } = useTranslation()

  ...rest of the code...

  ssn: string()
    .test(
      'ssn',
      t(
        'USM-Registration:ResponseError.error.already.exists',
        'Social security number already exists. Please login at domain.com.',
        {link: linkShouldBeHere}
      ),
      function(value) {
        return
      },
    ),

To display an error , I am using error and helperText on input

    error={!!form.errors.ssn}
    helperText={form.errors.ssn}
formik validation reactjs
1 Answers

I have resolved the issue with <Trans> component from react-i18next

  // Used for Social Security number validation message
  const link = {
    url: 'https://example.com',
    name: 'example.com',
  };

  // Conditionally render form validation error message received from api
  const apiErrorCondition = apiErrorMessage && !form.errors.ssn;

  return (
    <div>
      {apiErrorCondition ? (
        <div>
          <Trans
            i18nKey={`USM-Registration:ResponseError.${apiErrorMessage}`}
            t={t}
            values={{ link }}
            components={{
              code: (
                <a
                  style={{ textDecoration: 'underline' }}
                  href={link.url}
                  target="_blank"
                >
                  {link.name}
                </a>
              ),
            }}
          />
        </div>
      ) : null}
    </div>
  );

and change translation to

"already.exists": "Social security number already exists. Please login at <code>{{link.name}}</code>.",

Mile Mijatović0
Related