title: how can i get input data from two dynamic form in react class component?
body: <p>im new with react.js. i dont know how can i update the state by button  and get the  input data from dynamic form as a json array formate. im facing the issue of onchangehandle event <a href="https://i.stack.imgur.com/c1Rqo.png" rel="nofollow noreferrer">enter image description here</a>. here is mention the my ui dynamic form ,which i have created. here is two forms are opening dynamicall like add more.</p>
  <pre><code>import React from &quot;react&quot;;
  import { Button, Container, Col, Form, InputGroup } from &quot;react-bootstrap&quot;;
  import { FaTrashAlt } from &quot;react-icons/fa&quot;;
  import Accordion from 'react-bootstrap/Accordion';
  
  
  class Forms extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          // _id: &quot;6196350112f781463c760aa0&quot;,
          // book_title: &quot;&quot;,
          // book_authore: &quot;&quot;,
          // book_overview: &quot;&quot;,
          // book_category: &quot;&quot;,
          // book_genre: &quot;&quot;,
          // book_tag: &quot;&quot;,
          // book_languages: &quot;&quot;,
          // book_duration: &quot;&quot;,
          // book_rating: 5,
          // book_publication: &quot;&quot;,
          // book_created_date: &quot;&quot;,
          // booksEpdf: &quot;&quot;,
          // booksAudio: &quot;&quot;,
          // book_rating_count: 0,
          // book_review: 0,
          // book_like: 0,
          video_data: [
              {
                 _id: &quot;&quot;,
                  book_All_details: &quot;&quot;,
                  number_of_chapters:&quot;&quot;,
                  chapter: 1,
                  video_title: &quot;&quot;,
                  description: &quot;&quot;,
                  video_url: &quot;&quot;,
                  video_image: &quot;&quot;,
                  releaseDate: &quot;&quot;,
                  subvideo_data: [
                      {
                          _id: &quot;&quot;,
                          subchapterid:&quot;&quot;,
                          subchapter: 1,
                          subvideo_title: &quot;&quot;,
                          subdescription: &quot;&quot;,
                          subvideo_url: &quot;&quot;,
                          subvideo_image: &quot;&quot;,
                          subreleaseDate: &quot;&quot;,
                      },
                    
                  ],
          
              },
          
       
          ],
    
      }  
  }
  
      handleChange(event){
          this.setState({[event.target.video_title]:event.target.value})
          console.log(event)
              
      }
          
      //to add a tier
      addTClick = (i) =&gt; {
          const video_data = [...this.state.video_data];
          video_data[i].subvideo_data.push({ subvideo_title:&quot;&quot;, subdescription:&quot;&quot;,subvideo_url:&quot;&quot;,subvideo_image:&quot;&quot;});
          this.setState({ video_data });
          console.log(video_data)
      };
  
      //to remove a tier
      removeTClick = (i, idx) =&gt; {
          const video_data =  [...this.state.video_data];
          video_data[i].subvideo_data.splice(idx, 1);
          this.setState({ video_data });
      };
  
  
      //to add region and tier
      addFTClick = () =&gt; {
          const video_data = [...this.state.video_data];
          video_data.push({
                  number_of_chapters: &quot;&quot;,
                  chapter: &quot;&quot;,
                  video_title: &quot;&quot;,
                  description: &quot;&quot;,
                  video_url: &quot;&quot;,
                  video_image: &quot;&quot;,
                  subvideo_data: [{subvideo_title:&quot;&quot;, subdescription:&quot;&quot;,subvideo_url:&quot;&quot;,subvideo_image:&quot;&quot;} ]
                  });
                  this.setState({ video_data });
              };
  
      render() {
          const   removeFormFields =(i) =&gt;{
          const video_data = [...this.state.video_data];
          video_data.splice(i, 1);
              this.setState({ video_data });
          }
  
      return (
          &lt;Container&gt;
              {this.state.video_data.map((video_datas, i) =&gt; (
              &lt;form key={i}&gt;
                    
              &lt;div class=&quot;container&quot; style={{background:'aqua'}}&gt;
                  &lt;div class=&quot;form-group col-sm-4&quot;&gt;
                      &lt;label&gt;Enter Chapter Name:&lt;/label&gt;
                      &lt;input type=&quot;text&quot; name=&quot;number_of_chapters&quot;
                               onChange={this.handleChange.bind(this)} 
                      value={this.state.number_of_chapters} 
                      class=&quot;form-control&quot; placeholder=&quot;title&quot; /&gt;
                  &lt;/div&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;form-group col-sm-6&quot;&gt;
                      &lt;label&gt;Title:&lt;/label&gt;
                      &lt;input type=&quot;text&quot;              onChange={this.handleChange.bind(this)} 
                      value={this.state.video_title} 
                          name=&quot;video_title&quot; class=&quot;form-control&quot;  placeholder=&quot;title&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group col-sm-6&quot;&gt;
                      &lt;label&gt;Description:&lt;/label&gt;
                      &lt;input type=&quot;text&quot;               onChange={this.handleChange.bind(this)} 
                      value={this.state.description} 
                          name=&quot;description&quot;  class=&quot;form-control&quot;  placeholder=&quot;authors&quot; /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;Thambnail image:&lt;/label&gt;
                  &lt;input               onChange={this.handleChange.bind(this)} 
                      value={this.state.video_image} 
                          name =&quot;video_image&quot; type=&quot;file&quot; class=&quot;form-control&quot;  /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label&gt;Upload Video:&lt;/label&gt;
                  &lt;input               onChange={this.handleChange.bind(this)} 
                      value={this.state.video_url} 
                          name=&quot;video_url&quot; type=&quot;file&quot; class=&quot;form-control pb-4&quot; /&gt;
              &lt;/div&gt; &lt;br&gt;&lt;/br&gt;
              {video_datas.subvideo_data.map((subvideo_datas, idx) =&gt; (
                  &lt;div class=&quot;container bg-success py-2&quot; key={idx}&gt; 
                      &lt;div className=&quot;main&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;
                          &lt;div class=&quot;form-group col-sm-6&quot;&gt;
                              &lt;label&gt;Title:&lt;/label&gt;
                              &lt;input type=&quot;text&quot; ref=&quot;video_title&quot;
                               onChange={this.handleChange.bind(this)}   value={this.state.subvideo_title} 
                                  name=&quot;subvideo_title&quot; class=&quot;form-control&quot;  placeholder=&quot;title&quot; /&gt;
                          &lt;/div&gt;
                              &lt;div class=&quot;form-group col-sm-6&quot;&gt;
                              &lt;label&gt;Description:&lt;/label&gt;
                              &lt;input type=&quot;text&quot;  onChange={this.handleChange.bind(this)} 
                               value={this.state.subdescription}   name=&quot;subdescription&quot; class=&quot;form-control&quot;  placeholder=&quot;title&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt; 
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label&gt;Thambnail image:&lt;/label&gt;
                          &lt;input  name =&quot;subvideo_image&quot;  onChange={this.handleChange.bind(this)} 
                            value={this.state.subvideo_image} type=&quot;file&quot; class=&quot;form-control&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label&gt;Upload Video:&lt;/label&gt;
                          &lt;input  name=&quot;video_url&quot; onChange={this.handleChange.bind(this)} 
                            value={this.state.subvideo_url} type=&quot;file&quot; class=&quot;form-control pb-4&quot; /&gt;
                      &lt;/div&gt; &lt;br&gt;&lt;/br&gt;
                      &lt;Button  variant=&quot;danger&quot;  onClick={this.removeTClick.bind(this, i, idx)}&gt;&lt;FaTrashAlt style={{ marginRight:&quot;5px&quot;}}/&gt;Remove&lt;/Button&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      ))}
                      &lt;div className=&quot;button-section&quot; style={{textAlign:&quot;center&quot;}}&gt;
                           &lt;Button variant=&quot;link&quot; className=&quot;addMoreBtn&quot;onClick={this.addTClick.bind(this, i)}&gt;+Add More &lt;/Button&gt;
                      &lt;/div&gt;
                      {
                          i? 
                          &lt;Button  variant=&quot;danger&quot; onClick={() =&gt; removeFormFields(i)}&gt;&lt;FaTrashAlt style={{ marginRight:&quot;5px&quot;}}/&gt;Remove&lt;/Button&gt;
                          : null
                      }
                      &lt;/div&gt;
                      &lt;/form&gt;
                      ))}
                     &lt;div className=&quot;button-section&quot; style={{textAlign:&quot;center&quot;}}&gt;
                          &lt;Button className=&quot;addMoreBtn&quot; onClick={this.addFTClick.bind(this)}&gt;
                                  +Add chapter
                          &lt;/Button&gt;
                      &lt;/div&gt;
          &lt;/Container&gt;
        );
    }
  }
  
  export default Forms;
  </code></pre>