title: Is this pattern of coding in react.js right?
body: <pre><code>import Connect from './connect.svg'
  import Explore from './explore.svg' 
  
  export const SomeComponent = props =&gt; {
      const someArray = [
          {text: &quot;first&quot;, image: Connect},
          {text: &quot;second&quot;, image: Explore}
      ]
  
      return ( 
          &lt;div&gt; 
              {someArray.map(item =&gt; (
                  &lt;img src={item.image} alt=&quot;some text&quot; /&gt;
                  &lt;div&gt; {item.text} &lt;/div&gt;  
              ))}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>I have used this method of setting an image property in objects to the corresponding images I imported, and then looping all through to output things like <code>&lt;li&gt;</code> etc. Everything seems to work fine but I want to confirm whether this is a bad way to code or not.</p>