title: How to append input values into HTML elements with React
body: <p>I'm trying to build an input form that will display submitted values in another page using React hooks. I can see the values when console logged and what I'm looking for is how to append them as HTML elements.</p>
  <p>The following code is a simplified version of my work.</p>
  <pre class="lang-js prettyprint-override"><code>const DisplayList = ({ inputs }) =&gt; (
    &lt;div&gt;
      &lt;h3&gt;page 2 (parent component)&lt;/h3&gt;
      &lt;div&gt;{inputs}&lt;/div&gt;
    &lt;/div&gt;
  );
  
  const AddList = () =&gt; {
    const onSubmitForm = () =&gt; {
      console.log(`
        First name: ${inputs.firstName}
        Last name: ${inputs.lastName}`);
    };
  
    const { inputs, handleInputChange, handleSubmit } = InputForm(onSubmitForm);
  
    return (
      &lt;div&gt;
        &lt;h3&gt;page 1 (child component)&lt;/h3&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;label&gt;First Name: &lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            name=&quot;firstName&quot;
            onChange={handleInputChange}
            value={inputs.firstName || &quot;&quot;}
            required
          /&gt;
          &lt;label&gt;Last Name: &lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            name=&quot;lastName&quot;
            onChange={handleInputChange}
            value={inputs.lastName || &quot;&quot;}
            required
          /&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        &lt;hr /&gt;
        &lt;DisplayList /&gt;
      &lt;/div&gt;
    );
  };
  
  export default AddList;
  
  </code></pre>
  <p>Any help and guide provided are greatly appreciated!</p>
  <p>Here's a link to check out full code: <a href="https://codesandbox.io/s/pass-data-to-another-page-zujwp?file=/InputForm.js" rel="nofollow noreferrer">Code Sandbox</a></p>