title: How to render multiple images from array in React JS?
body: <p>everyone. I'm fairly new to React Js, and I got stuck while trying to render images from an array. My code is :</p>
  
  <pre><code>import { home } from "../homeObj";
  
  
  const Logos = ({ title, img, img2, img3, key }) =&gt; {
      return (
          &lt;&gt;
              &lt;div className={styles.anaShif} key={key}&gt;
                  &lt;h2 className={styles.h2}&gt; {title} &lt;/h2&gt;
                  &lt;div className={styles.logos}&gt;
                      &lt;img
                          id={img.id}
                          src={img}
                          alt={img.alt}
                          className={styles.img}
                          srcSet={`${img2} 2x, 
                          ${img3} 3x`}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  function Trusted() {
      const logoComponent = home.map((_objects, i, id) =&gt; {
          if (home[i].id === "logos") {
              return (
                  &lt;&gt;
                      &lt;Logos
                          key={i}
                          id={id}
                          title={home[i].title}
                          img={home[i].logos[i].src}
                      /&gt;
                  &lt;/&gt;
              );
          }
      });
  
      return (
          &lt;&gt;{logoComponent}&lt;/&gt;
  
          );
      }
  
      export default Trusted;
  
  </code></pre>
  
  <p>and  { home } :</p>
  
  <pre><code>export const home = [
  
  {
          id: "logos",
          title: "Welcome to",
          logos: [
              {
                  id: 1,
                  alt: "car",
                  src: require("./logo_06.png"),
                  src2: require("./logo_06@2x.png"),
                  src3: require("./logo_06@2x.png"),
              },
              {
                  id: 2,
                  alt: "red-car",
                  src: require("./logo_07.png"),
                  src2: require("./logo_07@2x.png"),
                  src3: require("./Tlogo_07@3x.png"),
              },
          ],
  ]
  </code></pre>
  
  <p>What happens is that I can only display an image of the 2nd element of logos array, it's like React Js completely skips 1st element(id, img.src, alt).</p>
  
  <p>What I want to do is to be able to display both images at the same time and also add elements dynamically, when a new element gets added to {home}, it should display without hardcoding.</p>
  
  <p>Any help would be greatly appreciated. </p>