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

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