Add edit fields on table row on click in reactjs without using react-table library

Question

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?

<table className="table-data">
 <tbody>
 <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Class</th>
    <th>Section</th>
 </tr>   {this.state.students.map((item,key) => {return


<Fragment key={key}>
          <tr key={key} onClick={()=> 
    {this.setState({clientIsEditing:true},this.edit(key,item))}}> 
    <td>{item[1]}</td>    
    <td>{item[2]}</td>    
    <td>{item[3]}</td>  
    <td>{item[4]}</td> 
    </tr>  
    </Fragment>
    <tbody>
    </table>})}

the above is the code to display table. this.state.students has the student details from db. I want the particular table row to be changed to a row of input fields on click. Kindly help. I'm new to the world of react.

Dacre Denny · Accepted Answer · 2018-10-16 23:45:30Z

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:

<table className="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 (
    <tr key={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 ? <input value={item[1]} onChange={ e => editField(e.target.value, 1) } /> : <span>{item[1]}</span> }</td>    
    <td>{ item.editing ? <input value={item[2]} onChange={ e => editField(e.target.value, 2) } /> : <span>{item[2]}</span> }</td>    
    <td>{ item.editing ? <input value={item[3]} onChange={ e => editField(e.target.value, 3) } /> : <span>{item[3]}</span> }</td>  
    <td>{ item.editing ? <input value={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!

edited Oct 16, 2018 at 23:45

answered Oct 16, 2018 at 22:27

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Anjali Over a year ago

I get the following errors with the above code.. TypeError: _this3.edit is not a function and 'students' is not defined no-undef (in the onClick event)

Anjali Over a year ago

The spread operator is throwing error , Syntax error: Unexpected token, expected , I'm sorry for being silly, I am completely new to React programming..

Anjali Over a year ago

I'll try that. Meanwhile, could you pls tell me what is editing in item.editing? where is the prop coming from

Anjali Over a year ago

Sorry @dacre , it throws syntax error inside the onclick function.

Dacre Denny Over a year ago

Sure, let me know how it goes - yes, editing is initially undefined, however following user click of a table row, the editing field is added to a student and defined as true/false depending on toggling stated.

|

Collectives™ on Stack Overflow

Add edit fields on table row on click in reactjs without using react-table library

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related