Please follow the following setup to achieve your requirement:
Step 1: Please watch the video for clear understanding where you will know the implementation of logic in react js
This is in the English knowledge
How to Add/Delete form input field dynamically in react js with GitHub code || Add more in react.js
This is in the Hindi knowledge
Add/Delete from input field dynamically in react js in Hindi || react add and delete input row
https://chat.whatsapp.com/BaipKpuTdy4JxlgNDLoihc
Github Link https://github.com/AshutoshChoubey/DTRnodeReact
two important file which is used in the video tutorials:-
https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/components/Task/taskForm.js
https://github.com/AshutoshChoubey/DTRnodeReact/blob/master/my-app/src/components/Task/taskList.js
Step 4: Check the file here
import React from "react" |
||
import TaskList from "./taskList" | ||
import axios from 'axios'; | ||
import { NotificationContainer, NotificationManager } from 'react-notifications'; | ||
class Form extends React.Component { | ||
state = { | ||
taskList: [{ index: Math.random(), projectName: "", task: "", taskNotes: "", taskStatus: "" }], | ||
date: "", | ||
description: "", | ||
} | ||
handleChange = (e) => { | ||
if (["projectName", "task", "taskNotes", "taskStatus"].includes(e.target.name)) { | ||
let taskList = [...this.state.taskList] | ||
taskList[e.target.dataset.id][e.target.name] = e.target.value; | ||
} else { | ||
this.setState({ [e.target.name]: e.target.value }) | ||
} | ||
} | ||
addNewRow = (e) => { | ||
this.setState((prevState) => ({ | ||
taskList: [...prevState.taskList, { index: Math.random(), projectName: "", task: "", taskNotes: "", taskStatus: "" }], | ||
})); | ||
} | ||
deteteRow = (index) => { | ||
this.setState({ | ||
taskList: this.state.taskList.filter((s, sindex) => index !== sindex), | ||
}); | ||
// const taskList1 = [...this.state.taskList]; | ||
// taskList1.splice(index, 1); | ||
// this.setState({ taskList: taskList1 }); | ||
} | ||
handleSubmit = (e) => { | ||
e.preventDefault(); | ||
if(this.state.date==='' || this.state.description==='') | ||
{ | ||
NotificationManager.warning("Please Fill up Required Field . Please check Task and Date Field"); | ||
return false; | ||
} | ||
for(var i=0;i<this.state.taskList.length;i++) | ||
{ | ||
if(this.state.taskList[i].projectName==='' || this.state.taskList[i].task==='') | ||
{ | ||
NotificationManager.warning("Please Fill up Required Field.Please Check Project name And Task Field"); | ||
return false; | ||
} | ||
} | ||
let data = { formData: this.state, userData: localStorage.getItem('user') } | ||
axios.defaults.headers.common["Authorization"] = localStorage.getItem('token'); | ||
axios.post("http://localhost:9000/api/task", data).then(res => { | ||
if(res.data.success) NotificationManager.success(res.data.msg); | ||
}).catch(error => { | ||
if(error.response.status && error.response.status===400) | ||
NotificationManager.error("Bad Request"); | ||
else NotificationManager.error("Something Went Wrong"); | ||
this.setState({ errors: error }) | ||
}); | ||
} | ||
clickOnDelete(record) { | ||
this.setState({ | ||
taskList: this.state.taskList.filter(r => r !== record) | ||
}); | ||
} | ||
render() { | ||
let { taskList } = this.state//let { notes, date, description, taskList } = this.state | ||
return ( | ||
<div className="content"> | ||
<NotificationContainer/> | ||
<form onSubmit={this.handleSubmit} onChange={this.handleChange} > | ||
<div className="row" style={{ marginTop: 20 }}> | ||
<div className="col-sm-1"></div> | ||
<div className="col-sm-10"> | ||
<div className="card"> | ||
<div className="card-header text-center">Add Your Daily Task</div> | ||
<div className="card-body"> | ||
<div className="row"> | ||
<div className="col-sm-4"> | ||
<div className="form-group "> | ||
<label className="required">Date</label> | ||
<input type="date" name="date" id="date" className="form-control" placeholder="Enter Date" /> | ||
</div> | ||
</div> | ||
<div className="col-sm-4"> | ||
<div className="form-group "> | ||
<label className="required">Description</label> | ||
<textarea name="description" id="description" className="form-control"></textarea> | ||
</div> | ||
</div> | ||
</div> | ||
<table className="table"> | ||
<thead> | ||
<tr> | ||
<th className="required" >Project Name</th> | ||
<th className="required" >Task</th> | ||
<th>Notes</th> | ||
<th>Status</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<TaskList add={this.addNewRow} delete={this.clickOnDelete.bind(this)} taskList={taskList} /> | ||
</tbody> | ||
<tfoot> | ||
<tr><td colSpan="4"> | ||
<button onClick={this.addNewRow} type="button" className="btn btn-primary text-center"><i className="fa fa-plus-circle" aria-hidden="true"></i></button> | ||
</td></tr> | ||
</tfoot> | ||
</table> | ||
</div> | ||
<div className="card-footer text-center"> <button type="submit" className="btn btn-primary text-center">Submit</button></div> | ||
</div> | ||
</div> | ||
<div className="col-sm-1"></div> | ||
</div> | ||
</form> | ||
</div> | ||
) | ||
} | ||
} | ||
export default Form |
import React from "react" | |
const TaskList = (props) => { | |
return ( | |
props.taskList.map((val, idx) => { | |
let projectName = `projectName-${idx}`, task = `task-${idx}`, taskNotes = `taskNotes-${idx}`, taskStatus = `taskStatus-${idx}` | |
return ( | |
<tr key={val.index}> | |
<td> | |
<input type="text" name="projectName" data-id={idx} id={projectName} className="form-control " /> | |
</td> | |
<td> | |
<input type="text" name="task" id={task} data-id={idx} className="form-control " /> | |
</td> | |
<td> | |
<textarea name="taskNotes" id={taskNotes} data-id={idx} className="form-control"></textarea> | |
</td> | |
<td> | |
<select name="taskStatus" id={taskStatus} data-id={idx} className="form-control" > | |
<option value="pending">Pending</option> | |
<option value="In Progress">In progress</option> | |
<option value="Completed">Completed</option> | |
<option value="Hold">Hold</option> | |
</select> | |
</td> | |
<td> | |
{ | |
idx===0?<button onClick={()=>props.add()} type="button" className="btn btn-primary text-center"><i className="fa fa-plus-circle" aria-hidden="true"></i></button> | |
: <button className="btn btn-danger" onClick={(() => props.delete(val))} ><i className="fa fa-minus" aria-hidden="true"></i></button> | |
} | |
</td> | |
</tr > | |
) | |
}) | |
) | |
} | |
export default TaskList |
Hello guys Please subscribe my youtube channel and support me as well so that we can work hard to share my knowledge
We want to make quality video and blog tutorial based on a practical approach which we are using in the organization to achieve this functionality
Please please it is my humble request to you guys
If you want to donate as well then please connect with me on whatsApp for more information
https://chat.whatsapp.com/BaipKpuTdy4JxlgNDLoihc
https://www.youtube.com/c/worldgyan
Thank you for your support