How to fix eslint error which Doesn’t allow for in

for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.eslintno-restricted-syntax

The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.eslintguard-for-in

const data = tableData.map((row, index) => {
        const rowData = [];
        let i = 0;
        const keys = Object.keys(row);
        const values = Object.values(row);
        

        for (const key in row) {
            rowData.push({
                key: headingColumns[i],
                val: row[key]
            });
            i++;
        }
        return (
            // eslint-disable-next-line react/no-array-index-key
            <tr key={index + i}>
                {rowData.map((item) => (
                    <td key={item.id} data-heading={item.key}>
                        {item.val}
                    </td>
                ))}
            </tr>
        );
    });