title: reactjs dynamically adding a form input
body: <p>I am working with a form in react, and what I would like is that when I click a button, I add a new component which is just an input to the screen.  It all mostly works, as planned.  The issue is with the following: the layout is that I have one main component, which then displays a child component.  That child component is called from a map of a useState. (More after code snippet)</p>
  
  <p>This is the code of the main component:</p>
  
  <pre><code>import React, { useState } from "react";
  import SingleProfile from "./individual_profile";
  
  const ProfileInformation = (props) =&gt; {
  console.log("proflie render");
    const [ProfilesBoolean, setProfilesBoolean] = useState(false);
    const [profiles, setProfiles] = useState(props.Data['profiles'])
  
    const FieldAdd = (event)=&gt;{
         event.preventDefault();
        const copy = profiles;
        copy.push({Network:'',url:''})
        return(copy)
    }
  
    function CreateInput(){
        return profiles.map((data, index) =&gt;&lt;SingleProfile index={index} data={data} /&gt;)
    }
  
    const accordion = (event) =&gt; {
      const NextElement = event.target.nextElementSibling;
      if (!event.target.className.includes("display")) {
        NextElement.style.maxHeight = NextElement.scrollHeight + "px";
      } else {
        NextElement.style.maxHeight = 0;
      }
    };
    return (
      &lt;div className="AccordionItem"&gt;
        &lt;div
          className={
            ProfilesBoolean ? "AccordionHeader-display" : "AccordionHeader"
          }
          onClick={(e) =&gt; setProfilesBoolean(!ProfilesBoolean)}
          id="ProfileForm"
        &gt;
          Profiles
        &lt;/div&gt;
  
        &lt;div className="AccordionContent"&gt;
          &lt;div className="AccordionBody"&gt;
            {
             profiles.map((data, index) =&gt; (
               &lt;SingleProfile index={index} data={data} /&gt;
             ))
            }
            &lt;button id="ProfileAdd" onClick={(e) =&gt; {setProfiles(FieldAdd(e))}}&gt;
              Add a profile
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  export default ProfileInformation;
  </code></pre>
  
  <p>When I click the button and onClick fires <code>FieldAdd()</code> the useState updates, with a new empty object as expected.  However, it does not appear inside my <code>&lt;div className="AccordionBody"&gt;</code> as I would expect it to.  </p>
  
  <p>The following code is used to display components, by opening and closing the child div.  When it is open is when you see the child components and the add button.  If I click the div, to close and then click again to re-open it, the new child component appears.</p>
  
  <pre><code>&lt;div
    className={ProfilesBoolean ? "AccordionHeader-display" : "AccordionHeader"}
    onClick={(e) =&gt; setProfilesBoolean(!ProfilesBoolean)}
    id="ProfileForm"
  &gt;
    Profiles
  &lt;/div&gt;;
  </code></pre>
  
  <p>Is it possible to have the child component appear without having to close and re-open the div?</p>