title: ANT Table with dropdown
body: <p>I have a 3 select inside a table inside a form. Im calling the api to populate this one select on the componentdidmount. the next one gets populated depending on the value selected in the first one. and the last one gets populated depending on the value selected in the second one. How can I do this. Im using a editable table component from ANT design.</p>
  
  <p>Im using axios for the api.</p>
  
  <pre><code>apiSelect(){
      axios
      .get(`http://10.42.0.108:8000/asset_request/required_type_dropdown?id=${this.columns.requesttype}`)
      .then(response=&gt;response.data)
      .then(data=&gt;{this.setState({request_type:data.request_type_list})
                  this.setState({loading:false});
                })
      .catch(error =&gt; {console.log(error);})
    }
  </code></pre>
  
  <p>This is the full code. I modified the original ant file. But Im still only a noob on reactjs so haven't got the entire hang of it yet. Please help guys. </p>
  
  <pre><code>
      const required_type = {"name":"select"};
      const asset_type = {"name":"select"};
      const EditableContext = React.createContext();
      const { Option } = Select;
      const EditableRow = ({ form, index, ...props }) =&gt; (
        &lt;EditableContext.Provider value={form}&gt;
          &lt;tr {...props} /&gt;
        &lt;/EditableContext.Provider&gt;
      );
  
      const EditableFormRow = Form.create()(EditableRow);
  
      class EditableCell extends React.Component {
        state = {
          editing: false,
        };
  
        toggleEdit = () =&gt; {
          const editing = !this.state.editing;
          this.setState({ editing }, () =&gt; {
            if (editing) {
              this.input.focus();
            }
          });
        };
  
        save = e =&gt; {
          const { record, handleSave } = this.props;
          this.form.validateFields((error, values) =&gt; {
            if (error &amp;&amp; error[e.currentTarget.id]) {
              return;
            }
            this.toggleEdit();
            handleSave({ ...record, ...values });
          });
        };
  
        renderCell = form =&gt; {
          this.form = form;
          const { children, dataIndex, record, title } = this.props;
          const { editing } = this.state;
          return editing ? (
            &lt;Form.Item style={{ margin: 0 }}&gt;
              {form.getFieldDecorator(dataIndex, {
                rules: [
                  {
                    required: true,
                    message: `${title} is required`,
                  },
                ],
                initialValue: record[dataIndex],
              })(&lt;Input ref={node =&gt; (this.input = node)} onPressEnter={this.save} onBlur={this.save} /&gt;)}
            &lt;/Form.Item&gt;
          ) : (
            &lt;div
              className="editable-cell-value-wrap"
              style={{ paddingRight: 24 }}
              onClick={this.toggleEdit}
            &gt;
              {children}
            &lt;/div&gt;
          );
        };
  
        render() {
          const {
            editable,
            dataIndex,
            title,
            record,
            index,
            handleSave,
            children,
            ...restProps
          } = this.props;
          return (
            &lt;td {...restProps}&gt;
              {editable ? (
                &lt;EditableContext.Consumer&gt;{this.renderCell}&lt;/EditableContext.Consumer&gt;
              ) : (
                children
              )}
            &lt;/td&gt;
          );
        }
      }
  
      export default class EditableTable extends React.Component {
        constructor(props) {
          super(props);
  
          this.columns = [
            {
              title: 'Request Type',
              dataIndex: 'requesttype',
              align:'center',
              //width: '5%',
              render: (select, record) =&gt;
                this.state.dataSource.length &gt;= 1 ? (
                              &lt;Select defaultValue='Select' name='requestType'&gt;
                                  {this.props.requesttypedrop.map(person =&gt; (
                                      &lt;Option value={person.name} label={person.name} key={person.name}&gt;
                                        {person.name}
                                      &lt;/Option&gt;
                                   ))}
                              &lt;/Select&gt;
                ) : null,
            },
            {
              title: 'Required Type',
              dataIndex: 'requiredtype',
              align:'center',
              //width: '5%',
              render: (select, record) =&gt;
                this.state.dataSource.length &gt;= 1 ? (
                              &lt;Select defaultValue='Select' name='requiredType'&gt;
                              {/* {required_type.map(person =&gt; (
                                      &lt;Option value={person.name} label={person.name} key={person.name}&gt;
                                        {person.name}
                                      &lt;/Option&gt;
                                   ))} */}
                              &lt;/Select&gt;
                ) : null,
            },
            {
              title: 'Asset Type',
              dataIndex: 'assettype',
              align:'center',
              //width: '5%',
              render: (select, record) =&gt;
                this.state.dataSource.length &gt;= 1 ? (
                              &lt;Select defaultValue='Select' name='assetType'&gt;
                              {/* {asset_type.map(person =&gt; (
                                      &lt;Option value={person.name} label={person.name} key={person.name}&gt;
                                        {person.name}
                                      &lt;/Option&gt;
                                   ))} */}
                              &lt;/Select&gt;
                ) : null,
            },
            {
              title: 'Operation',
              dataIndex: 'operation',
              align:'center',
              render: (text, record) =&gt;
                this.state.dataSource.length &gt;= 1 ? (
                  &lt;Popconfirm title="Sure to delete?" onConfirm={() =&gt; this.handleDelete(record.key)}&gt;
                    &lt;a href="javascript:;"&gt;&lt;Icon style={{color:'#282c34'}} type="delete" theme="filled" /&gt;&lt;/a&gt;
                  &lt;/Popconfirm&gt;
                ) : null,
            },
          ];
  
          this.state = {
            dataSource: [
              {
                key: '0',
  
              }
  
            ],
            count: 1,
          };
        }
  
  
        handleDelete = key =&gt; {
          const dataSource = [...this.state.dataSource];
          this.setState({ dataSource: dataSource.filter(item =&gt; item.key !== key) });
        };
  
        handleAdd = () =&gt; {
          const { count, dataSource } = this.state;
          const newData = {
            key: count,
  
          };
          this.setState({
            dataSource: [...dataSource, newData],
            count: count + 1,
          });
        };
  
        handleSave = row =&gt; {
          const newData = [...this.state.dataSource];
          const index = newData.findIndex(item =&gt; row.key === item.key);
          const item = newData[index];
          newData.splice(index, 1, {
            ...item,
            ...row,
          });
          this.setState({ dataSource: newData });
        };
  
        render() {
          const { dataSource } = this.state;
          const components = {
            body: {
              row: EditableFormRow,
              cell: EditableCell,
            },
          };
          const columns = this.columns.map(col =&gt; {
            if (!col.editable) {
              return col;
            }
            return {
              ...col,
              onCell: record =&gt; ({
                record,
                editable: col.editable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave: this.handleSave,
              }),
            };
          });
          return (
            &lt;div&gt;
              &lt;Table
                components={components}
                rowClassName={() =&gt; 'editable-row'}
                bordered
                dataSource={dataSource}
                columns={columns}
                style={{overflowX:"scroll"}}
              /&gt;
              &lt;Button onClick={this.handleAdd} style={{ marginTop: 16,float: 'right' }}&gt;
                Add a row
              &lt;/Button&gt;
            &lt;/div&gt;
          );
        }
      }
  
  </code></pre>