Inline MaterialTable Edit with DropDown - reactjs

Question

I'm attempting to create a MaterialTable with an inline editable field that has a dropdown. The problem seems to be in the columns object. With the lookup attribute, one can specify key:value pairs as dropdown list items. My dilemma seems to be that I am not able to iterate over a list and add the key-value pairs in the dynamic fashion below. It seems to only work when written like lookup:{ 1: "Test Value", 2: "Test Value 2" }. Please explain if my understanding is incorrect.
<MaterialTable
title="Available Attributes"
icons={this.tableIcons}
data={availableAttributesList}
columns={[
{ title: 'Attribute', field: 'name' },
{
title: 'Data Type',
field: 'dataType',
lookup: { dataTypePayload.map((attribute, name) => ({
attribute.id : attribute.dataType
}))}
}
]}
options={{
actionsColumnIndex: -1
}}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = editableAvailableAttributesList;
data.push(newData);
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = editableAvailableAttributesList;
const index = data.indexOf(oldData);
data[index] = newData;
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
}),
onRowDelete: oldData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
let data = availableAttributesList;
const index = data.indexOf(oldData);
data.splice(index, 1);
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
})
}}
/>

Answer 1

The map creates an array of objects, which you have then placed inside another object.
As you've noticed, this won't work. To get the desired format, try this:
<MaterialTable
// ...other props
columns={[
{ title: 'Attribute', field: 'name' },
{
title: 'Data Type',
field: 'dataType',
lookup: dataTypePayload.reduce((acc: any, attribute: any) => {
acc[attribute.id] = attribute.dataType
return acc
}, {})
}
]}
// ...other props
/>
Hope that helps!