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>
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.
Advertisement
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;