AllenFang / AllenFang/react-bootstrap-table
Cannot edit on iterated table?
- Dominant language
- JavaScript
- Stars
- 2.2k
- Forks
- 761
- PR merge metrics
- No merged PRs in 30d
Description
I am having trouble with editing cells inside array iteration.
Let me explain what I mean. If I do something like this, it works fine. `this.props.students` is an array of objects:
ID
Name
Grade
The data that I am actually trying to display is a little more complex. Each student is associated with several scores. I have another array named scores. To display both data at once, I created an object consisting of a name and array of scores. Something like this (not exactly, but you get the idea:
`studentArr = {albert: [{id: 1, score: 10, week: 1}, {id: 2, score: 11, week: 2}],
toni: [{id: 3, score: 9, week: 1}, {id: 4, score: 0, week: 2}]}`
To display it, I had to do the following:
```
...
const cellEditProp = {
mode: 'click'
};
export default...
render(){
const bsTable = [];
if(Object.keys(this.props.studentsScores).length > 0) {
for(var i = 0; i < Object.keys(this.props.studentsScores).length; i++){
bsTable.push(
{Object.keys(this.props.studentsScores)[i]}
ID
Week
Point
)
}
};
return(
{bsTable}
...
```
In short, the code above displays all X students and its associated scores.
However, when I tried to edit it, although when I click on the cell, it displays the prompt to edit the cell, but after I pressed Return/ Enter, it reverts back to the previous value. In short, the edit did not persist on that page.
Tried to edit the point to have value of 10
After I pressed Enter, it reverts back to previous value of 2.
The first table works as intended, but the second tables (the one using array of students), did not. Is there a workaround?
Contributor guide
Assessment
This issue has not been assessed yet.