title: Mapping data from one page to another on reactjs
body: <p>I have 2 pages.
  1st page: to view all the data from a database from API (code below)
  2nd page: to add in new data to the previously stored data in the database</p>
  <pre><code>render() {
          const obj = (this.state.message);
          const datamapping = Object.entries(obj);
          return (
              &lt;div&gt;
                  &lt;div className=&quot;viewall&quot;&gt;
                      &lt;table class=&quot;table table-hover&quot;&gt;
                          &lt;thead&gt;
                              &lt;th scope=&quot;col&quot;&gt;Button in here&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;key1&lt;/th&gt;
                              &lt;th scope=&quot;col&quot;&gt;key2&lt;/th&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              {obj.Items?.map((data, key) =&gt; {
                                  return (
                                      &lt;tr key={key}&gt;
                                          &lt;td&gt;
                                              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
                                                  Click me to add data
                                              &lt;/button&gt;
                                          &lt;/td&gt;
                                          &lt;td&gt;{data.key1}&lt;/td&gt;
                                          &lt;td&gt;{data.key2}&lt;/td&gt;
                                      &lt;/tr&gt;
                                  )
                              })}
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  </code></pre>
  <p>Currently my first page displays a table of data (4 rows) and at the start of each row, there is a button that would allow you to proceed to the second page to add on more data. Add on more data meaning, creating a form with values from key1 and key2, and adding on key3.</p>
  <p>2nd page code:</p>
  <pre><code>render() {
      return (
          &lt;form&gt;
              &lt;div class=&quot;row justify-content-lg-center&quot;&gt;
                  &lt;div class=&quot;col-lg-auto&quot;&gt;
                      &lt;label for=&quot;key1&quot; class=&quot;form-label&quot;&gt;key1&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;key1&quot; value=&quot;value1&quot;&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-lg-auto&quot;&gt;
                      &lt;label for=&quot;key2&quot; class=&quot;form-label&quot;&gt;key2&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;key2&quot; value=&quot;value2&quot;&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-lg-auto&quot;&gt;
                      &lt;label for=&quot;key3&quot; class=&quot;form-label&quot;&gt;key3&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;key3&quot;&gt;&lt;/input&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      );
    }
  </code></pre>
  <p>How should I map over {data.key1} from the first page to value1 from the second page?</p>