Reusing a single componenet

Question

I'm trying to use a single component to render two different warning messages in a react app as the only difference in that warning message (I have both of them in a translation file) is wordings, so I tried passing language props like shown below, I'm not sure how to pass the language props while calling the component

const WarningOnIncorrectPassword = ({ onYes, onNo, isOpen, language }) => {
    return (
            <Typography variant="p14">{language}</Typography>


<WarningOnIncorrectPassword
                    language={I don't know what to pass here if I pass translation 1 it renders that text only}
                    isOpen={warningVisible}
                    onYes={handleagreewarning}
                    onNo={handleDisagreewarning}
                />

I tried passing a function like the below but it failed:

const checkWarningMessage=()=>{
if(it is a password error)
{
  return translation_id.password_warning;
}
else
{
  return translation_id.username_warning;
}

Expected outcome: I'll need to display an error message with the following text if the password is wrong "Password is wrong" which is already present component so now I just need to modify the component to show the following warning message as well if the username is wrong "The user name is wrong".

The translation is a file name where I stored the warning message as that's how all the existing components are being rendered

I've stored like this:

 ng_loginWarning_passwordwrong_warning: {
    id: 'ng_loginWarning_passwordwrong_warning',
    defaultMessage: 'Password is incorrect'
},
ng_loginWarning_userNamewrong_warning: {
    id: 'ng_loginWarning_usernamewrong_warning',
    defaultMessage: 'username is incorrect'
},

I'd appreciate any help on this thanks!

Have you tried passing in the language you receive in the props? Besides, your code and phrasing are very unclear. You just gave us two pieces of code without any explanation, we'd love it if you could go through the code and explain what exactly happens right now, what is `language` and `translation1` and the expected result. — Eldar B., Jun 22 '22 at 06:57
Hi Eldar, I'm not sure if that's what I've tried can you please help me understand this with an example like a sample code? I'm an absolute beginner — Noob, Jun 22 '22 at 06:59
Just pass `language={language}`, referencing the `language` parameter in the props. This is but a mere guess, I am entirely unsure what your code does from your current explanation — Eldar B., Jun 22 '22 at 07:00
I've edited the question like you've suggested and sure thanks I'll try this — Noob, Jun 22 '22 at 07:06
Just a quick question, so I'm not referencing the translation file anywhere in this process so how does React know which translation file it should render? — Noob, Jun 22 '22 at 07:10
I'm not sure if I can confirm that, however, I understand you're asking this cause of the translation file, in that case the translation file has an import like this import { defineMessages } from 'react-intl'; const warningtranslations = defineMessages({ — Noob, Jun 22 '22 at 07:17
You are trying to render a component from within itself. If you define `WarningOnIncorrectPassword` you cannot return itself, that would cause a recursive element. — Eldar B., Jun 22 '22 at 07:29

score 1 · Accepted Answer · answered Jun 22 '22 at 08:24

You need to pass language={language} where {language} will have the details you need to provide to the prop.

<WarningOnIncorrectPassword
     language={language}
     isOpen={warningVisible}
     onYes={handleagreewarning}
     onNo={handleDisagreewarnin
 />

Reusing a single componenet

1 Answers1