How can get both text and value of lookup column on React material-table?

Question

How can I get both text and value of lookup column from editable material-table? Lookup gets only value of selected item. For example;

{ "0":"Istanbul", "2":"Ankara", "3":"Izmir" }

If I select "Istanbul" on lookup then I get 0 value. But I need both 0 and Istanbul.

This is my row value when adding a new row.

[{
    "txtIsinAdi":"İş 1",
    "lstIsinSinifi":"0"
},
{
    "txtIsinAdi":"İş 2",
    "lstIsinSinifi":"1"
}]

And this is my row added code :

               onRowAdd: newData =>
                new Promise((resolve, reject) => {
                    if(this.props.datafield.IsReadOnly === false)
                    {
                        setTimeout(() => {
                        {
                            const data = this.state.data;
                            data.push(newData);
                            this.setState({ data }, () => resolve());
                        }
                        resolve()
                        }, 1000)
                    }
                    else
                    {
                        this.messageHelper.showWarningMessage("Bu tabloya kayıt ekleme yetkiniz yok.");
                        reject();
                    }
                  })
            }}

Do you need that while editing, afterwards to show the rendered data or just during onRowAdd to parse the data? — Domino987, Dec 05 '19 at 22:49
I need to access text and value of lookup selected item in newData parameter of onRowAdd event. Thanks. — Tolga AYKURT, Dec 06 '19 at 06:45

score 1 · Answer 1 · answered Dec 06 '19 at 07:56

You can simply make the lookup object global like this:

const lookup = { "0":"Istanbul", "2":"Ankara", "3":"Izmir" }
class Table { ....}

and use that in the columns

columns={columns={[
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: lookup,
      },
    ]}}

and reference that in your callback:

 onRowAdd: newData =>
            new Promise((resolve, reject) => {
                // The value (0)
                const value = newData.birthCity;
                // The city (Istanbul)
                const city = lookup[value];
                if(this.props.datafield.IsReadOnly === false)
                {
                    setTimeout(() => {
                    {
                        // You are mutating your data here because its the same object
                        const data = this.state.data;
                        data.push(newData);
                        this.setState({ data }, () => resolve());
                    }
                    resolve()
                    }, 1000)
                }
                else
                {
                    this.messageHelper.showWarningMessage("Bu tabloya kayıt ekleme yetkiniz yok.");
                    reject();
                }
              })
        }}

Additionally, you are mutating your data object in the onRowAdd callback. The state data could also be different on the setState call since they get batched up. Set the data like this:

this.setState(prevState => ({ data: [...prevState.data, newData] }), () => resolve());

This will ensure that data is already up to date and it does not get mutated.

How can get both text and value of lookup column on React material-table?

1 Answers1