title: looping over two arrays in react
body: <p>So i have two map() blocks and 1st block is part of 2nd one, but i dont want 1st map() to affect 2nd one. How to accomplish that?
  I'm new in JS and React. Thank you!</p>
  <pre><code>const Ciklogen = () =&gt; {
        links.map((h) =&gt; {
          console.log(h.heading, h.text, h.url)
          return (
            &lt;&gt;
              &lt;h3 className='heading'&gt;{h.heading}&lt;/h3&gt;
              &lt;p className='kratak-opis'&gt;{h.text}&lt;/p&gt;
              &lt;a href={h.url}&gt;
                &lt;button className='read-more'&gt;Read more&lt;/button&gt;
              &lt;/a&gt;
            &lt;/&gt;
          )
        })
      
        return (
          &lt;&gt;
            &lt;Navigation logo={logo} links={links} /&gt;
            {cssClass.map((style) =&gt; {
              return (
                &lt;div key={style.id} className={`bg-image ${style.name}`}&gt;
                  &lt;div className='bg-text'&gt;{ **1st block should be here**} &lt;/div&gt;
                &lt;/div&gt;
              )
            })}
          &lt;/&gt;
        )
      }
      
      export default Ciklogen
  </code></pre>