title: Mapping Over an Array onClick Button in React
body: <p>I'm mapping over an array to get the text for each button. I want to map over an array for each button to show text for a mapped array. </p>
  
  <p>So the array for the titles of the button is: </p>
  
  <pre><code>const arr1 = ["one", "two", "three"]
  </code></pre>
  
  <p>And the text to show when each button is clicked is: </p>
  
  <pre><code>const arr2 = ["button one", "button two", "button three"]
  </code></pre>
  
  <p>So I want button with the text "one" to show the text "button one" as a p tag when clicked. </p>
  
  <p>Here is what I have so far </p>
  
  <pre><code>const myComp = () =&gt; {
      const arr1 = ['one', 'two', 'three']
  
      const arr2 = ['button one', 'button two', 'button three']
  
      const mapping = () =&gt; {
          arr2.map((arr) =&gt; {
              return &lt;p&gt;{arr}&lt;/p&gt;
          })
      }
      return (
          &lt;&gt;
              {arr1.map((data) =&gt; 
                  &lt;button onClick={mapping()}&gt;
                      {data}
                  &lt;/button&gt;
              )}
          &lt;/&gt;
  )
  </code></pre>