react is not re-rendering component inside array.map, when state of array changes

Question

the tableData array gets live data from firebase, when data is changed in db, the table gets updated like it should, but the problem is, CrudPanel is stuck with the data it rendered the first time.

the entire table gets updated but when you press buttons for edit it shows old record.

<tbody>
                {this.state.tableData.map((rowdata, index) => {
                    return (
                        <tr key={index+1}>
                            <td style={{textAlign:'center'}}>{index+1}</td>
                            <td>{rowdata.key}</td>
                            <td>{rowdata.data.Fullname}</td>
                            <td>{rowdata.data.Phonenumber}</td>
                            <td>{rowdata.data.dateofbirth}</td>
                            <td><CrudPanel username={rowdata.key} record={rowdata.data}/></td>
                        </tr>
                    )
                })}
</tbody>

Whenever a new record is inserted or a record is deleted,

tableData is being updated successfully.
table rows are getting re-rendered correctly, except the CrudPanel.

crud panel takes the takes the row data and renders two button insert, update, when pressed opens up a modal...

but the point is, it does not render crudPanel when the tableData is changing.

zz44 was the 13th record, i added "yoyo" so now 13th record is yoyo but if i pressed the edit button it show data of zz44, because it was the 13th record when page loaded first time.

the rowdata binds to the td is getting re-rendered but how and why does it leave CrudPanel untouched?

I think the problem is with your index being used as key; If a record is inserted in between an existing list, the index being used as key will cause issues; can you try another unique value as key other than index? — Shahin Nazer
– Shahin Nazer, Commented Jun 18, 2022 at 21:34
I would have not gussed it in a million years, thank you very much. — Hassaan Raza Now
– Hassaan Raza Now, Commented Jun 18, 2022 at 21:46

Shahin Nazer · Accepted Answer · 2022-06-18 21:55:35Z

1

The problem would be with the index being used as the key. When the elements of the list are updated especially in the middle (elements are added or removed from the list), the use of index as key will create problems, We should be referring to another unique value in the object of the list for it to work as intended

answered Jun 18, 2022 at 21:55

Shahin Nazer

1861 silver badge6 bronze badges

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

Comments

Hassaan Raza Now · Accepted Answer · 2022-06-19 14:40:39Z

thanks to Shahin Nazer Answer, i got rid of the problem i declared a global variable and used it as a key and boom everything works normal.

var UniqeKeyVarible = 1;

{this.state.tableData.map((rowdata, index) => {
                        return (
                            <tr key={UniqeKeyVarible++}>
                                <td style={{textAlign:'center'}}>{index+1}</td>
                                <td>{rowdata.key}</td>
                                <td>{rowdata.data.Fullname}</td>
                                <td>{rowdata.data.Phonenumber}</td>
                                <td>{rowdata.data.dateofbirth}</td>
                                <td><CrudPanel username={rowdata.key} record={rowdata.data}/></td>
                            </tr>
                        )
                    })}

Collectives™ on Stack Overflow

react is not re-rendering component inside array.map, when state of array changes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related