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 enter image description here. here is mention the my ui dynamic form ,which i have created. here is two forms are opening dynamicall like add more.
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';
class Forms extends React.Component {
constructor(props) {
super(props);
this.state = {
// _id: "6196350112f781463c760aa0",
// book_title: "",
// book_authore: "",
// book_overview: "",
// book_category: "",
// book_genre: "",
// book_tag: "",
// book_languages: "",
// book_duration: "",
// book_rating: 5,
// book_publication: "",
// book_created_date: "",
// booksEpdf: "",
// booksAudio: "",
// book_rating_count: 0,
// book_review: 0,
// book_like: 0,
video_data: [
{
_id: "",
book_All_details: "",
number_of_chapters:"",
chapter: 1,
video_title: "",
description: "",
video_url: "",
video_image: "",
releaseDate: "",
subvideo_data: [
{
_id: "",
subchapterid:"",
subchapter: 1,
subvideo_title: "",
subdescription: "",
subvideo_url: "",
subvideo_image: "",
subreleaseDate: "",
},
],
},
],
}
}
handleChange(event){
this.setState({[event.target.video_title]:event.target.value})
console.log(event)
}
//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 });
console.log(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>
{this.state.video_data.map((video_datas, i) => (
<form key={i}>
<div class="container" style={{background:'aqua'}}>
<div class="form-group col-sm-4">
<label>Enter Chapter Name:</label>
<input type="text" name="number_of_chapters"
onChange={this.handleChange.bind(this)}
value={this.state.number_of_chapters}
class="form-control" placeholder="title" />
</div>
<div class="row">
<div class="form-group col-sm-6">
<label>Title:</label>
<input type="text" onChange={this.handleChange.bind(this)}
value={this.state.video_title}
name="video_title" class="form-control" placeholder="title" />
</div>
<div class="form-group col-sm-6">
<label>Description:</label>
<input type="text" onChange={this.handleChange.bind(this)}
value={this.state.description}
name="description" class="form-control" placeholder="authors" />
</div>
</div>
<div class="form-group">
<label>Thambnail image:</label>
<input onChange={this.handleChange.bind(this)}
value={this.state.video_image}
name ="video_image" type="file" class="form-control" />
</div>
<div class="form-group">
<label>Upload Video:</label>
<input onChange={this.handleChange.bind(this)}
value={this.state.video_url}
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" ref="video_title"
onChange={this.handleChange.bind(this)} value={this.state.subvideo_title}
name="subvideo_title" class="form-control" placeholder="title" />
</div>
<div class="form-group col-sm-6">
<label>Description:</label>
<input type="text" onChange={this.handleChange.bind(this)}
value={this.state.subdescription} name="subdescription" class="form-control" placeholder="title" />
</div>
</div>
<div class="form-group">
<label>Thambnail image:</label>
<input name ="subvideo_image" onChange={this.handleChange.bind(this)}
value={this.state.subvideo_image} type="file" class="form-control" />
</div>
<div class="form-group">
<label>Upload Video:</label>
<input name="video_url" onChange={this.handleChange.bind(this)}
value={this.state.subvideo_url} 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>
</form>
))}
<div className="button-section" style={{textAlign:"center"}}>
<Button className="addMoreBtn" onClick={this.addFTClick.bind(this)}>
+Add chapter
</Button>
</div>
</Container>
);
}
}
export default Forms;
