title: Dynamic lookup from React's state in material-table
body: <p>I'm using the <a href="https://material-table.com/#/" rel="noreferrer">material-table</a> component, which I fill with dynamic data coming from Redux (an array of objects), but then I do other things with that data inside my component's state. To create column dropdown filters, there's an element inside each column's array of options, <code>lookup</code>, that receives an object and creates the dropdown based on it's values.
  I am extracting some items from my data and putting them inside an element in my component's state. This is an object, the same kind that <code>lookup</code> receives. The thing is that the component shows an empty dropdown, as if the object was empty, but it's not. I'm logging it in into the console and the object is filled with the data I need.
  I initially thought it was a render problem, that the object is empty at the beggining, and then it's filled with data, but the component renders every time.(Yeah, React is reactive).
  This is only the code needed to help me solve this problem:</p>
  
  <p><strong>Table component</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import MaterialTable from "material-table";
  
  class CustomTable extends Component {
    state = {
      column1: "",
      column2: "",
      column3: "",
      column1FilterList: {}
      columns: [
        {
          title: "Column1",
          field: "column1",
          editable: "onAdd",
          filtering: true,
          lookup: { ...this.column1FilterList }
        },
        {
          title: "Column2",
          field: "column2",
          editable: "onAdd",
          filtering: true,
        },
        {
          title: "Column3",
          field: "column3",
          editable: "onAdd",
          filtering: true
        }
      ]
    };
  
    componentDidMount() {
      this.props.fetchValues()
      this.props.fetchApplications()
      this.filterColumn1ExistingKeys()
    }
  
    filterColumn1ExistingKeys = () =&gt; {
      return this.props.elements.map(element =&gt; {
         return this.setState(prevState =&gt; ({
             column1FilterList: {
                ...prevState.column1FilterList,
               [element.name]: element.name
             }
         }))
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;MaterialTable
            options={{
              search: false,
              actionsColumnIndex: 4,
              filtering: true
            }}
            title="Search by"
            columns={this.state.columns}
            data={this.state.data}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CustomTable;
  </code></pre>