title: Add Form Fields Dynamically -- ReactJs
body: <p>My requirement is to add form fields dynamically. I am able to add form group dynamically on click of button <strong>+Add Heading</strong>.</p>
  
  <p>In that form group, I have a button <strong>+Add Content</strong> on click of which a new input element should be added to the group.</p>
  
  <p>I am able to modify the JSON accordingly and logging the same and updating the state.
  but my view is not rendering as expected.</p>
  
  <p>Any help will be highly appreciated.</p>
  
  <p>Stackblitz: <a href="https://stackblitz.com/edit/react-utjwsu?embed=1&amp;file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-utjwsu?embed=1&amp;file=index.js</a></p>
  
  <p>/<em>Code for the same</em>/</p>
  
  <pre><code>import React, { Component } from 'react';
  import { render } from 'react-dom';
  import { Form, FormGroup, Label, Progress,Button } from 'reactstrap';
  import Hello from './Hello';
  import './style.css';
  
  
  const byPropKey = (propertyName, value) =&gt; () =&gt; ({
      [propertyName]: value,
    });
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: 'React',
        Information:'',
        ImageUrl:'',
        isUploading: false,
        isUploaded: true,
        showProgress: false,
        progress: 0,
        avatarUrl:'',
        ref:'WhitePapersItems',
        formValid: false,
        content: [{Heading: "", Content: [{value:""}]}]
      };
  
          this.AddContentBox = this.AddContentBox.bind(this);
          this.handleChange = this.handleChange.bind(this);
          this.AddContentInput = this.AddContentInput.bind(this);
    }
  
    AddContentBox(){
          return this.state.content.map((element,i)=&gt;(
              &lt;div className="header-content" key={i} &gt;
                  &lt;div className="heading-content-wrapper"&gt;
                  &lt;FormGroup&gt;
                  &lt;Label className="set-label-pos upload-img" for="Heading"&gt;Heading&lt;/Label&gt;
                  &lt;input className="form-control" onChange={this.handleChange.bind(this, i)}
                      type="text"/&gt;
                  &lt;/FormGroup&gt;
                  &lt;FormGroup&gt;
                  &lt;Label className="set-label-pos upload-img" for="Heading"&gt;Content&lt;/Label&gt;
                  &lt;input className="form-control" onChange={this.handleChange.bind(this, i)}
                      type="text"/&gt;
                  &lt;/FormGroup&gt;
                  {/* {this.AddContentInput} */}
                  &lt;FormGroup&gt;
                  &lt;Button color="success" onClick={this.AddContentInput.bind(this,i)}&gt;+ Add Content&lt;/Button&gt;
                  &lt;/FormGroup&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          ))
      }
  
      handleChange(i, e) {
      const { Heading, value } = e.target;
        let content = [...this.state.content];
        content[i] = {...content[i], [Heading]: value};
        this.setState({ content });
     }
  
     AddContentInput(index, val){
          console.log('Add ContentInput triggered',val,index);       
          const contents = this.state.content;
          contents[index].Content.push({value:''});
          this.setState({content:contents});
          const item = this.state.content[index].Content;
          console.log('item', item)
          return item.map((element, i)=&gt;(
              &lt;FormGroup&gt;
                 &lt;Label className="set-label-pos upload-img" for="Heading"&gt;Content&lt;/Label&gt;
                 &lt;input className="form-control" type="text"/&gt;
             &lt;/FormGroup&gt;
         ))
  
          // console.log(this.state)
          // this.addContentField(index);
      }
  
       addHeading(event){
          event.preventDefault();
          this.setState(prevState =&gt; ({ 
              content: [...prevState.content, { Heading: "", Content: [{value:""}] }]
          }))
          this.AddContentBox();
     }
  
    render() {
      return (
        &lt;div&gt;
  
  
          &lt;Form onSubmit={this.onSubmit}&gt;
  
                  &lt;FormGroup&gt;
                      &lt;Label className="set-label-pos upload-img" for="Information"&gt;Information&lt;/Label&gt;
                      &lt;textarea className="form-control" rows="10" onChange={event =&gt; this.setState(byPropKey('Information', event.target.value))}
                          type="text"/&gt;
                  &lt;/FormGroup&gt;
                  {this.AddContentBox()}
                  &lt;div className="add-heading-button"&gt;
                      &lt;Button color="primary" onClick={this.addHeading.bind(this)}&gt;+ Add Heading&lt;/Button&gt;
                  &lt;/div&gt;
                  &lt;FormGroup&gt;
                  &lt;input type="hidden" value={this.state.ImageUrl} onChange={event =&gt; this.setState(byPropKey('ImageUrl', event.target.value))}/&gt;
                  &lt;/FormGroup&gt;
  
                  &lt;Button className="btn btn-danger" size="lg" type="submit"&gt;+ Add White Papers Item&lt;/Button&gt;
                  &lt;/Form&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>