title: How to render text or url in React?
body: <p>In a React project, I have JSON data as follows</p>
  <pre class="lang-js prettyprint-override"><code>const data = [
    { id: '123abc', comment: 'How are you?' },
    { id: '234abc', comment: 'https://flower.jpg' },
    { id: '123xyz', comment: 'Whatsupp?' },
    { id: '335sde', comment: 'https://galaxy.png' },
  ];
  
  </code></pre>
  <p>I'am trying as under</p>
  <pre><code>&lt;div&gt;
  {/* For images */}
  &lt;img src={data.comment} height=&quot;50px&quot;/&gt;
  
  {/* For text */}
  &lt;Typography variant=&quot;caption&quot;&gt;
     {data.comment}
  &lt;/Typography&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As seen above some comments are text whereas some are images. So, how to render it? Any appropriate solution highly appreciated</p>