Skip to content

how can i solve the issue of react dynamic form loded automaticaly in sub form?

    const videoTemplet = { book_All_details: "",  number_of_chapters:"", chapter:'',  video_title: "",  description: "", video_url: "", video_image: "",}
    const [bookvideo ,setBookvideo] = useState([videoTemplet]);
    const addVideo = ()=>{
        setBookvideo([...bookvideo,videoTemplet])
        
   }
   const onChange =(e ,index) =>{
       const updateBookvideo =bookvideo.map((bookvideo ,i) => index == i ?
       Object.assign(bookvideo ,{[e.target.name]: e.target.value}):bookvideo
       );
      setBookvideo(updateBookvideo);

     
    }
    const removeFormFields =(index) =>{
        const filterbookvideo =[...bookvideo]
        filterbookvideo.splice(index, 1);
        setBookvideo(filterbookvideo);
        
    }

    const [isaddVideo, setaddVideo] = useState(false);

  const toggleClass = () => {
    setaddVideo(addVideo);
  };
    
    const videoTempletc = { book_All_details: "",  number_of_chapters:"", chapter:'',  video_title: "",  description: "", video_url: "", video_image: "",}
    const [bookvideoc ,setBookvideoc] = useState([]);
    const addVideoc = ()=>{
        setBookvideoc([...bookvideoc,videoTempletc])
        
        
        
   }
   const onChangec =(e ,indexc) =>{
       const updateBookvideoc =bookvideoc.map((bookvideoc ,i) => indexc == i ?
       Object.assign(bookvideoc ,{[e.target.name]: e.target.value}):bookvideoc
       );
      setBookvideoc(updateBookvideoc);

     
    }
    const removeFormFieldsc =(indexc) =>{
        const filterbookvideoc =[...bookvideoc]
        filterbookvideoc.splice(indexc,1);
        setBookvideoc(filterbookvideoc);
        
    }

    <Accordion.Body >
                            <div class="mainform bg-info">
                                {bookvideo.map((element, index) => (
                                    <div class="container" key={index}>
                                        <div class="form-group col-sm-4">
                                            <label>Enter Chapter Name:</label>
                                            <input type="text" name="number_of_chapters"
                                            onChange={e => onChange(e,index)} class="form-control" placeholder="title" />
                                        </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>Title:</label>
                                            <input type="text" name="video_title" value={bookvideo.video_title} onChange={e => onChange(e,index)} class="form-control"  placeholder="title" />
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>Description:</label>
                                            <input type="text" name="description" value={bookvideo.description} onChange={e => onChange(e,index)} class="form-control"  placeholder="authors" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Thambnail image:</label>
                                        <input      name ="video_image" value={bookvideo.video_image} onChange={e => onChange(e,index)} type="file" class="form-control"  />
                                    </div>
                                    <div class="form-group">
                                        <label>Upload Video:</label>
                                        <input  name="video_url" value={bookvideo.video_url} onChange={e => onChange(e,index)} type="file" class="form-control pb-4" />
                                    </div> <br></br>
    
                                 {bookvideoc.map((element, indexc) => (
                                    <div class="container bg-success" key={indexc}> 
                                    <div className="main">
                                        <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>Title:</label>
                                            <input type="text" name="video_title" value={bookvideoc.video_title}    onChange={e => onChangec(e,indexc)} class="form-control"  placeholder="title" />
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>Description:</label>
                                            <input type="text" name="description" value={bookvideoc.description}    onChange={e => onChangec(e,indexc)} class="form-control"  placeholder="authors" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Thambnail image:</label>
                                        <input  name ="video_image" value={bookvideoc.video_image} onChange={e => onChangec(e,indexc)} type="file" class="form-control"  />
                                    </div>
                                    <div class="form-group">
                                        <label>Upload Video:</label>
                                        <input  name="video_url" value={bookvideoc.video_url} onChange={e => onChangec(e,indexc)} type="file" class="form-control pb-4" />
                                    </div> <br></br>
                                        {
                                        indexc ? 
                                        <button type="button"   className="buttonremove remove" onClick={() => removeFormFieldsc(indexc)}>Remove</button> 
                                        :null
                                    }
                                    </div>
                                    </div>
                                    ))}
                                        <div className="button-section" style={{textAlign:"center"}}>
                                        <button className="buttonsubmit add"  type="button" onClick={addVideoc}><PlusOutlined /></button>
                                    </div>
                                    {
                                        index ? 
                                        <button type="button"   className="buttonremove remove" onClick={() => removeFormFields(index)}>Remove</button> 
                                        : null
                                    }
                                    </div>
                                    ))}
    
                                 
                                    <div className="button-section" style={{textAlign:"center"}}>
                                        <button className="buttonsubmit add"  type="button" onClick={addVideo}><PlusOutlined /></button>
                                    </div>
                                </div>
                            </Accordion.Body>
    

enter image description here

I’m trying to create dynamic react form, which should be open addmore video series and in this form another sub video series will be open. I’m able to load dynamic both form, but I’m getting one error that is when I click to add another video series part then, there is opening sub videoseries automatically.

Answer

import React from "react";

import { Button, Container, Col, Form, InputGroup } from "react-bootstrap";
import { FaTrashAlt } from "react-icons/fa";
import Accordion from 'react-bootstrap/Accordion';
import "../style/Videouploadmodule.css";
import { useState } from 'react'
import {  PlusOutlined}  from "@ant-design/icons";
import "../style/Videouploadmodule.css";

class Videouploadmodule extends React.Component {
    
  constructor(props) {
    super(props);
    this.state = {
    
        _id: "6196350112f781463c760aa0",
        book_title: "me and my goal",
        book_authore: "Prity Shoeny2",
        book_overview: " above would be sound if Victoria is indeed tall and indeed has brown hair. The validity of an argument is determined solely by its logical form, while its soundness additionally depends on its content.[23]",
        book_category: "story",
        book_genre: "Fiction",
        book_tag: "comedy",
        book_languages: "english",
        book_duration: "2h5m",
        book_rating: 5,
        book_publication: "ncrt",
        book_created_date: "2021-11-18T11:12:01.850Z",
        booksEpdf: "https://booksepdf.s3.ap-south-1.amazonaws.com/images%20%285%29.jpeg",
        booksAudio: "https://booksaudioes.s3.ap-south-1.amazonaws.com/images%20%285%29.jpeg",
        book_rating_count: 0,
        book_review: 0,
        book_like: 0,
        video_data: [
            {
               _id: "618f1c9ae0e80c1950c26b6a",
                book_All_details: "618b1603f51add3838edea9b",
                number_of_chapters: 20,
                chapter: 1,
                video_title: "Episode1",
                description: "this is chapter one video",
                video_url: "https://hashvideo.s3.ap-south-1.amazonaws.com/soul.mp4",
                video_image: "https://bookstoreimage.s3.ap-south-1.amazonaws.com/WhatsApp%20Image%202021-11-03%20at%2010.49.18.jpeg",
                releaseDate: "2021-11-13T02:02:02.211Z",
                subvideo_data: [
                    {
                        _id: "618f1cdbe0e80c1950c26b6e",
                        subchapterid: "618f1c9ae0e80c1950c26b6a",
                        subchapter: 1,
                        subvideo_title: "Episode1",
                        subdescription: "this is chapter one video",
                        subvideo_url: "https://hashvideo.s3.ap-south-1.amazonaws.com/soul.mp4",
                        subvideo_image: "https://bookstoreimage.s3.ap-south-1.amazonaws.com/WhatsApp%20Image%202021-11-03%20at%2010.49.18.jpeg",
                        subreleaseDate: "2021-11-13T02:03:07.517Z",
                    },
                  
                ],
        
            },
        
     
        ],
        
    
    
    }}




  //to add a tier
  addTClick = (i) => {
    const video_data = [...this.state.video_data];
    video_data[i].subvideo_data.push({ subvideo_title:"", subdescription:"",subvideo_url:"",subvideo_image:""});
    this.setState({ video_data });
  };

  //to remove a tier
  removeTClick = (i, idx) => {
    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 = () => {
    const video_data = [...this.state.video_data];
    video_data.push({
            number_of_chapters: "",
            chapter: "",
            video_title: "",
            description: "",
            video_url: "",
            video_image: "",
            subvideo_data: [{subvideo_title:"", subdescription:"",subvideo_url:"",subvideo_image:""} ]
           });
           this.setState({ video_data });
         };

  render() {
      const removeFormFields =(i) =>{
        const video_data = [...this.state.video_data];
        video_data.splice(i, 1);
         this.setState({ video_data });
        
    }
     
    return (
      <Container>
       <div className="uloadbody">
      <section className="headertitle">
        <h2 class="title">Book Upload Admin Panel</h2>
        <div class="card-body">
            <form >
                <div class="row">
                        <div class="form-group col-sm-4">
                        <label>Book Title:</label>
                        <input type="text" class="form-control"  placeholder="title" />
                    </div>
                    
                    <div class="form-group col-sm-4">
                        <label>Publication Name:</label>
                        <input type="text" class="form-control"  placeholder="publication" />
                    </div>
                    
                    <div class="form-group  col-sm-4">
                        <label>Author Name:</label><br></br>
                            <div class="input-group">
                            <input type="text" class="form-control" placeholder="Author Name"/>
                            <div class="input-group-append">
                                <button class="btn btn-danger" type="button">Search</button>
                        </div>    
                    </div>
                </div>
                </div>
                <div class="form-group">
                        <label>Description:</label>
                        <textarea  class="form-control"  placeholder="Description" />
                </div>
                <div class="row">
                    <div class="form-group col-sm-4">
                        <label>Tags:</label>
                        <input type="text" class="form-control" placeholder="tag comedy" />
                    </div>
                    <div class="form-group col-sm-4">
                        <label>Language:</label>
                        <input type="text" class="form-control"  placeholder="languages" />
                    </div>
                    <div class="form-group col-sm-4">
                        <label>Duration:</label>
                        <input type="text" class="form-control"  placeholder="duration  in string" />
                   </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-4">
                        <label>Rating:</label>
                        <input type="text" class="form-control" placeholder="rating in number" />
                    </div>
                    <div class="form-group col-sm-4">
                        <label>Book Genera</label>
                        <input type="text" class="form-control"   placeholder="Originals" />
                    </div>
                    <div class="form-group col-sm-4">
                        <label>Rating Count:</label>
                        <input type="text" class="form-control" placeholder="125 "/>
                    </div> 
                </div>
                <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header >Upload Epdf</Accordion.Header>
                        <Accordion.Body>
                            <div class="form-group col-sm-4">
                                <label>Upload Epdf:</label>
                                <input type="file" class="form-control" filename="booksEpdf" id="booksEpdf" placeholder="booksEpdf"/>
                            </div>
                        </Accordion.Body>
                   </Accordion.Item>
                </Accordion>
                <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header >Upload Audio</Accordion.Header>
                        <Accordion.Body>
                                <div class="form-group col-sm-4">
                                    <label>Upload Audio:</label>
                                    <input   type="file" class="form-control" filename="booksAudio" id="booksAudio" placeholder="booksAudio" />
                                </div>
                        </Accordion.Body>
                    </Accordion.Item>
                </Accordion>
            <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header > Upload Video</Accordion.Header>
                        <Accordion.Body >
                            {this.state.video_data.map((video_datas, i) => (
                               <div class="container" style={{background:'aqua'}}key={i}>
                                    <div class="form-group col-sm-4">
                                        <label>Enter Chapter Name:</label>
                                        <input type="text" name="number_of_chapters"
                                        onChange={e => onChange(e,i)} class="form-control" placeholder="title" />
                                    </div>
                                <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label>Title:</label>
                                        <input type="text"onChange={e => onChange(e,i)} name="video_title" class="form-control"  placeholder="title" />
                                    </div>
                                    <div class="form-group col-sm-6">
                                        <label>Description:</label>
                                        <input type="text" onChange={e => onChange(e,i)} name="description"  class="form-control"  placeholder="authors" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Thambnail image:</label>
                                    <input onChange={e => onChange(e,i)} name ="video_image" type="file" class="form-control"  />
                                </div>
                                <div class="form-group">
                                    <label>Upload Video:</label>
                                    <input onChange={e => onChange(e,i)} name="video_url" type="file" class="form-control pb-4" />
                                </div> <br></br>

                            {video_datas.subvideo_data.map((subvideo_datas, idx) => (
                            <div class="container bg-success py-2" key={idx}> 
                                <div className="main">
                                    <div class="row">
                                    <div class="form-group col-sm-6">
                                        <label>Title:</label>
                                        <input type="text" onChange={(e) => this.handleTChange(e)}
                                            onClick={(e) => this.setSelectedIndex(idx)} name="video_title" class="form-control"  placeholder="title" />
                                    </div>
                                        <div class="form-group col-sm-6">
                                        <label>Title:</label>
                                        <input type="text"   onChange={(e) => this.handleTChange(e)}
                                            onClick={(e) => this.setSelectedIndex(idx)} name="video_title" class="form-control"  placeholder="title" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Thambnail image:</label>
                                    <input  name ="video_image"  onChange={(e) => this.handleTChange(e)}
                                            onClick={(e) => this.setSelectedIndex(idx)} type="file" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <label>Upload Video:</label>
                                    <input  name="video_url" onChange={(e) => this.handleTChange(e)}
                                            onClick={(e) => this.setSelectedIndex(idx)} type="file" class="form-control pb-4" />
                                </div> <br></br>
                                <Button  variant="danger"  onClick={this.removeTClick.bind(this, i, idx)}><FaTrashAlt style={{ marginRight:"5px"}}/>Remove</Button>
                                </div>
                                </div>
                                ))}
                                    <div className="button-section" style={{textAlign:"center"}}>
                                    <Button
                                            variant="link"
                                            className="addMoreBtn"
                                            onClick={this.addTClick.bind(this, i)}
                                            >
                                            +Add More
                                    </Button>
                                </div>
                    
                                
                                
                            {
                                i? 
                                <Button  variant="danger" onClick={() => removeFormFields(i)}><FaTrashAlt style={{ marginRight:"5px"}}/>Remove</Button>
                                : null
                                }
                                    
                                
                                </div>
                                ))}

                             
                                <div className="button-section" style={{textAlign:"center"}}>
                                 <Button className="addMoreBtn" onClick={this.addFTClick.bind(this)}>
                                            +Add chapter
                                          </Button>
                                     </div>
                                
                        </Accordion.Body>
                    </Accordion.Item>
                </Accordion>
                <div class="py-4" style={{textAlign:"center"}}>
                    <button class="submit btn bg-success" type="submit">Submit</button>
                </div>
            </form>
            
        </div>  
       </section>
    </div>
      </Container>
      
    );
  }
}

export default Videouploadmodule;