Error message: Encountered two children with the same key, `table-body-data-undefined`.

[agilvarry]

I'm getting this error that I'm not quite sure how to resolve: Warning: Encountered two children with the same key,table-body-data-undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

My app filters the source data for the table based on a few different queries, and I think the error only appears after I've queried the data at least once, but I'm not entirely sure what the problem is. Seems like the key indicates that I'm not including something but I'm not sure how it's generated.

[AustinHaws-Utah]

Looks like the TableBodyData component has this code snippet:

        recordsForContexts?.map((recordForContext) => (
          <TableBodyDataRowContext.Provider value={recordForContext} key={`table-body-data-${valueAtPath({ object: recordForContext.record, path: recordIdField })}`}>
            {children}
          </TableBodyDataRowContext.Provider>
        ))

Notice that the key is table-body-data-${valueAtPath({ object: recordForContext.record, path: recordIdField })}. It's expecting each record to have a value for its recordIdField field.

if the record doesn't have an id then maybe using the loop index would work, but loop index in keys is frowned up on the react world.

Is a recordIdField being passed as an attribute to the component? do all the records have a value in that field?

[AustinHaws-Utah]

Closing for inactivity. If you have a followup or more information, please reopen.