title: How create a new input field row by clicking a button reactjs
body: <p>I am building an ecommerce app and I want to collect the users different phone numbers and address.</p>
  <p>I want to create a new field where the user types new phone number and address</p>
  <p>I tried using state to accomplish the task but I am geting error</p>
  <p>TypeError: contactInfo.phoneInputs is undefined</p>
  <pre><code>const RegisterModal = ({openRegisterModal, setOpenRegisterModal}) =&gt; {
      const [contactInfo, setContactInfo] = useState({
          phoneInputValue : {},
          phoneInputs: [],
          addressInputValue : {},
          addressInputs: [],
      })
      console.log(contactInfo)
      const addContact = (e) =&gt; {
          e.preventDefault()
          const contactsphoneInfo = &quot;phoneNumber&quot;;
          const contactsAddressInfo = &quot;address&quot;;
          let phoneInputBox = 
          &lt;Input name={contactsphoneInfo} star=&quot;false&quot; label=&quot;PhoneNumber&quot; type=&quot;text&quot; className=&quot;col-md-6&quot; /&gt;
  
          let addressInputBox = 
          &lt;Input name={contactsAddressInfo} star=&quot;false&quot; label=&quot;address&quot; type=&quot;text&quot; className=&quot;col-md-6&quot; /&gt;
          setContactInfo(contactInfo.phoneInputs.push({phoneInputBox}))
          console.log(contactInfo)
      }
  
  return (
          &lt;div&gt;
            {
               contactInfo.phoneInputs.map(input =&gt; input)
             }
             button onClick={addContact}&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>)
  }</p>
  <p>export default RegisterModal</p>
  <p>How do I fix this error</p>
  <p>link to codesandbox</p>
  <p><a href="https://codesandbox.io/s/distracted-morse-s6zn0" rel="nofollow noreferrer">https://codesandbox.io/s/distracted-morse-s6zn0</a></p>