title: React - map array to child component
body: <p>I'm coding a site with multiple pages. A page <code>ComponentA</code>, have a child component that return sections with titles and paragraphs.</p>
  
  <p>The array in <code>ComponentA</code> pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass <code>title1</code> to <code>paragraph1</code>, <code>title2</code> to <code>paragraph2</code> and so on?</p>
  
  <p>ComponentA:</p>
  
  <pre><code>import Child from "../components/child";
  
  const ComponentA = () =&gt; {
    &lt;Layout&gt;
      &lt;h1&gt;Home Page&lt;/h1&gt;
      &lt;Child title={info.title} text={info.text} /&gt;
    &lt;/Layout&gt;
  }
  
  const info = {
    title: ["Title1", "Title2"],
    text: ["Paragraph1", "Paragraph2"]
  };
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>const Child = ({ text, title }) =&gt; {
    return (
      &lt;div&gt;
        {text.map(text =&gt; {
          return (
            &lt;div&gt;
              &lt;h3&gt;{title}&lt;/h3&gt;
              &lt;p&gt;{text}&lt;/p&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  </code></pre>