title: Reusing a single componenet
body: <p>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</p>
  <pre><code>const WarningOnIncorrectPassword = ({ onYes, onNo, isOpen, language }) =&gt; {
      return (
              &lt;Typography variant=&quot;p14&quot;&gt;{language}&lt;/Typography&gt;
  
  
  &lt;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}
                  /&gt;
  </code></pre>
  <p>I tried passing a function like the below but it failed:</p>
  <pre><code>const checkWarningMessage=()=&gt;{
  if(it is a password error)
  {
    return translation_id.password_warning;
  }
  else
  {
    return translation_id.username_warning;
  }
  </code></pre>
  <p>Expected outcome: I'll need to display an error message with the following text if the password is wrong &quot;Password is wrong&quot; 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 &quot;The user name is wrong&quot;.</p>
  <p>The translation is a file name where I stored the warning message as that's how all the existing components are being rendered</p>
  <p>I've stored like this:</p>
  <pre><code> 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'
  },
  </code></pre>
  <p>I'd appreciate any help on this thanks!</p>