title: How to add a link to images based on some condition using typescript and react?
body: <p>i want to add a link to the image based on some condition using javascript and react.</p>
  <p>what i am trying to do?</p>
  <p>i have mobile and desktop images.</p>
  <p>under mobile image i have text saying switch to mobile and
  is clickable if the users current url is not matching mobile_url.
  if the users current url matches the mobile_url then the text would be &quot;current version&quot; and is not clickable.</p>
  <p>under desktop image i have text saying switch to desktop and
  is clickable if the users current url is not matching desktop_url
  if the users current url matches the desktop_url then the text would be &quot;current version&quot; and is not clickable.</p>
  <p>below is my code that works,</p>
  <pre><code>function Parent () {
      const currentUrl = window.location.origin + '/';
      return (
          &lt;div className=&quot;Wrapper&quot;&gt;
              &lt;Dialog&gt;
                  &lt;span&gt;Select Version&lt;/span&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;block&quot;&gt;
                          &lt;span&gt;Mobile&lt;/span&gt;
                          &lt;div className=&quot;image_wrapper&quot;&gt; // want to add a link here too
                              &lt;img src={mobile} width={50} /&gt;
                          &lt;/div&gt;
                          &lt;span&gt;
                              {current_url === mobile_url ? (
                                  'Current version'
                              ) : (
                                  &lt;a href={mobile_url}&gt;Switch to mobile&lt;/a&gt;
                              )}
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;block&quot;&gt;
                          &lt;span&gt;Desktop&lt;/span&gt;
                          &lt;div className=&quot;image_wrapper&quot;&gt; //want to add a link here too
                              &lt;img src={desktop} width={50} /&gt;
                          &lt;/div&gt;
                          &lt;span&gt;
                              {current_url === desktop_url ? (
                                  'Current version'
                              ) : (
                                  &lt;a href={desktop_url}&gt;Switch to desktop&lt;/a&gt;
                              )}
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
         );
     }
  </code></pre>
  <p>Now what i want to do is as the texts switch to mobile and switch to desktops are clickable and have a link to an url. similarly i want to have links to the images mobile and desktop and should be clickable based on same conditions like texts have.</p>
  <p>so for mobile image if current url is same as mobile_url then image is not clickable. if current url doesnt match with mobile_url then image is clickable and redirects to mobile_url</p>
  <p>and for desktop image if current_url is same as desktop_url then image is not clickable. if current url doesnt match with desktop_url then image is clickable and redirects to desktop_url</p>
  <p>how can i do it. could someone help me with this. thanks.</p>
  <p><strong>EDIT:</strong></p>
  <p>i have tried like below and the images are not seen.</p>
  <pre><code>import desktop from '../image/desktop.svg';
  import mobile from '../image/mobile.svg';
  
  interface Props {
      src: any; //what should be the type here
      width: any; //what should be the type here
  }
  function RenderImage({src, width}: Props) {
      return (
          &lt;div className=&quot;image_wrapper&quot;&gt;
              &lt;img src={src} width={width}/&gt;
          &lt;/div&gt;
      );
  }
  
  function Parent () {
      const currentUrl = window.location.origin + '/';
      return (
          &lt;div className=&quot;Wrapper&quot;&gt;
              &lt;Dialog&gt;
                  &lt;span&gt;Select Version&lt;/span&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;block&quot;&gt;
                          &lt;span&gt;Mobile&lt;/span&gt;
                          {current_url === mobile_url ? (
                              &lt;a href={mobile_url}&gt;
                                  &lt;Image src={mobile} width={50}/&gt;
                              &lt;/a&gt; ): (
                                  &lt;Image src={mobile} width={50} /&gt;
                              )
                          }
                          &lt;span&gt;
                              {current_url === mobile_url ? (
                                  'Current version'
                              ) : (
                                  &lt;a href={mobile_url}&gt;Switch to mobile&lt;/a&gt;
                              )}
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;block&quot;&gt;
                          &lt;span&gt;Desktop&lt;/span&gt;
                          {current_url === desktop_url ? (
                              &lt;a href={desktop_url}&gt;
                                  &lt;Image src={desktop} width={width}/&gt;
                              &lt;/a&gt; ) : (
                                  &lt;Image src={desktop} width={width} /&gt;
                          }
                          &lt;span&gt;
                              {current_url === desktop_url ? (
                                  'Current version'
                              ) : (
                                  &lt;a href={desktop_url}&gt;Switch to desktop&lt;/a&gt;
                              )}
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
         );
     }
  </code></pre>
  <p>this works fine but what should be the types for src and width in this case thanks.</p>