javascript - How to get value of lookup in alert or console in Material table React?

Question

i am using material table in my project. I want to get value of lookup in alert or console. I am getting 63 or 32, instead of a city name

Codesandbox: https://codesandbox.io/s/material-demo-forked-dhg3e?file=/demo.js

actions={[
        {
          icon: "save",
          tooltip: "Save User",
          onClick: (event, rowData) => alert("You saved " + rowData.birthCity)
        }
      ]}

Answer 1

That's because your birthCity is actually referring to a number in your state data. You also have a column that contains a lookup value for the birthCity property.

You could look up the string value of the numeric city by something like this:

const lookup = { 34: "?stanbul", 63: "?anl?urfa" };
....
const [state, setState] = React.useState({
    columns: [
      { title: "Name", field: "name" },
      { title: "Surname", field: "surname" },
      { title: "Birth Year", field: "birthYear", type: "numeric" },
      {
        title: "Birth Place",
        field: "birthCity",
        lookup: lookup
      }
    ],
    data: [
      { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
      {
        name: "Zerya Betül",
        surname: "Baran",
        birthYear: 2017,
        birthCity: 34
      }
    ]
  });
....
return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          })
      }}
      actions={[
        {
          icon: "save",
          tooltip: "Save User",
          onClick: (event, rowData) => {
            alert("You saved " + lookup[rowData.birthCity]);
          }
        }
      ]}
    />
  );

Notice how I'm looking up the string value of the city by creating a new variable (lookup) that contains the string values of the cities that are linked to their respective numbers and using said variable to look up the values like so:

const lookup = { 34: "?stanbul", 63: "?anl?urfa" };
...
lookup[rowData.birthCity];

Live demo:
https://codesandbox.io/s/material-demo-forked-w805r?file=/demo.js