Add Edit Fields On Table Row On Click In Reactjs Without Using React-table Library
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:
<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!
Post a Comment for "Add Edit Fields On Table Row On Click In Reactjs Without Using React-table Library"