title: How to generate a component in React Form onClick
body: <p>I am struggling with some React functionality. My goal is to create a form where a day template can be added (for context - like a training club can make up a template of trainings for the day and then schedule them regularly). For that I wanted to add a button which onClick will create a smaller block with 2 form fields - time and training info. And I need user to add several of those, as much as they want.</p>
  <p>The thing is, while I understand a bit how react works, it seems to me I am just banging my head against the wall with this, as one thing is to render a component, but another to generate a bunch of same, completely new ones and connected to the form somehow, so I can send the data when clicking submit button.</p>
  <p><strong>Here is repository with this component:</strong>
  <a href="https://github.com/badgerwannabe/spacefitness-test-client" rel="nofollow noreferrer">https://github.com/badgerwannabe/spacefitness-test-client</a></p>
  <p><strong>Here is path to this component</strong>
  spacefitness-test-client/src/components/template-components/addTemplateForm.js</p>
  <p><strong>Here below how it looks rendered</strong></p>
  <p><a href="https://i.stack.imgur.com/ij8aX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ij8aX.png" alt="How it looks at the moment" /></a></p>
  <p>UPDATE 1 here is the full component here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, {useState}  from "react";
  import {useMutation } from "@apollo/client";
  import {useForm} from '../../utils/hooks'
  import { Button, Form  } from "semantic-ui-react";
  
  import {FETCH_TEMPLATES_QUERY, FETCH_TRAININGS_QUERY,ADD_TEMPLATES_MUTATION} from '../../utils/graphql'
  
  //hook for form functioning
  function AddTemplateForm (props){
     
      const {values, onChange, onSubmit} = useForm(createDayCallback,{
          date:'', dayTrainings:[{
            time:'testing time', training:"60e9e7580a6b113b2486113a"
          },{
            time:'testing2 time2', training:"61ec6a6d0f94870016f419bd"
          }
          ]
      });
  
  //apollo hook to send data through GraphQL    
  const [createDay, {error}] = useMutation(ADD_TEMPLATES_MUTATION, {
      errorPolicy: 'all',
      variables:values, 
      update(proxy, result){
          const data = proxy.readQuery({ 
              query:FETCH_TEMPLATES_QUERY,
          });
          
          proxy.writeQuery({query:FETCH_TEMPLATES_QUERY,
          data:{
              getDays: [result.data.createDay, ...data.getDays]
          }})
         
          props.history.push('/templates')
      },},
      {});
  
      function createDayCallback(){
          createDay();
      }
      
    //little component I want to dynamically add each time people press a button  
    function addDayTraining(){
  
      const addDayTraining = (
        &lt;&gt;
  
        &lt;Form.Field&gt;
              &lt;Form.Input
                 placeholder="time"
                 name="time"
                 onChange={()=&gt;{
                   console.log("time")
                 }}
                 values={values.time}
                 error={error ? true : false}
                 /&gt;
              &lt;Form.Input
                 placeholder="training"
                 name="training"
                 onChange={()=&gt;{
                   console.log("training")
                 }}
                 values={values.training}
                 error={error ? true : false}
                 /&gt;
    &lt;/Form.Field&gt;
  
  
  
        &lt;/&gt;
      )
      return addDayTraining
    }
      
  //Form component itself
      const AddTemplateForm = (
          &lt;&gt;
          &lt;Form onSubmit={onSubmit}&gt;
          &lt;h2&gt;Add a template :&lt;/h2&gt;
          &lt;Form.Field&gt;
              &lt;Form.Input
                 placeholder="date"
                 name="date"
                 onChange={onChange}
                 values={values.date}
                 error={error ? true : false}
                 /&gt;
    &lt;/Form.Field&gt;
                   &lt;Form.Field&gt; 
                   &lt;Button type="button" onClick={
                     addDayTraining
                   }&gt;Add training&lt;/Button&gt;
                   
                  &lt;/Form.Field&gt;
  
                 &lt;Button type ="submit" color="teal"&gt;Submit&lt;/Button&gt;
        
  
          
      &lt;/Form&gt;
      {error &amp;&amp; (
      &lt;div className="ui error message" style={{marginBottom:20}}&gt;
          &lt;li&gt;{error.graphQLErrors[0].message}&lt;/li&gt;
      &lt;/div&gt;
  )}
    
      &lt;/&gt;
      )
      return AddTemplateForm
      }
  export default AddTemplateForm;</code></pre>
  </div>
  </div>
  </p>