How to add or delete from the input fields dynamically in react

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

Step 2: Please ask your doubt through WhatsApp message about react this is a direct way to get an idea if you are unable to understand through video tutorials

https://chat.whatsapp.com/BaipKpuTdy4JxlgNDLoihc

Step 3: Check the GitHub link for more information

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