Skip to content Skip to sidebar Skip to footer
Home / Edit / Html Table / Jsx / Reactjs

Add Edit Fields On Table Row On Click In Reactjs Without Using React-table Library

Post a Comment
How to change a particular row that is clicked in JSX table to change to input editable row without using any libraries such as react-table?

Solution 1:

If I understand your question correctly, it seems like you need to track additional state to determine if a "student" row is currently in editing mode or not. Perhaps you could achieve that by doing something like this:

<tableclassName="table-data"><tbody><tr><th>Name</th><th>Age</th><th>Class</th><th>Section</th></tr>   

 {  this.state.students.map((item,key) => {

    const editField = (value, index) => {

      // Clone students data before mutation
      const students = this.state.students.map(item => ({ ...item }))

      // Update field by index of current student
      students[key][index] = value

      // Trigger re-render
      this.setState({ students })
    }

   return (
    <trkey={key}className={item.editing ? 'editing' : '' } onClick={()=> {

      // Clone students data before mutation
      const students = this.state.students.map(i => ({ ...i, editing : item.editing && i===item }))

      // Toggle editing flag of this current student (ie table row)
      students[key].editing = true; 

      // Trigger re-render
      this.setState({
        clientIsEditing:true, // This might not be needed ?
        students
      })
}
    }> 
    <td>{ item.editing ? <inputvalue={item[1]}onChange={e => editField(e.target.value, 1) } /> : <span>{item[1]}</span> }</td><td>{ item.editing ? <inputvalue={item[2]}onChange={e => editField(e.target.value, 2) } /> : <span>{item[2]}</span> }</td><td>{ item.editing ? <inputvalue={item[3]}onChange={e => editField(e.target.value, 3) } /> : <span>{item[3]}</span> }</td><td>{ item.editing ? <inputvalue={item[4]}onChange={e => editField(e.target.value, 4) } /> : <span>{item[4]}</span> }</td></tr>  )
  })
  }

  </tbody></table>

Here is a working jsFiddle as well - hope that helps!

Post a Comment for "Add Edit Fields On Table Row On Click In Reactjs Without Using React-table Library"

Menu Halaman Statis

© 2022 - Html5 Tech