How to make first dropdown not render in reactjs and ant design

Question

I need to make my current draggable component's dropdown to not render on specific cell (specifically the first Row). However, it will still show the cell just without the dropdown. I tried to search for a way however could not find any. Appreciate any help / directions given. Thanks! I also also attached the screenshot of current and expected. (Just take note of the dropdown being empty)

*Current Interface - all dropdown rendered

*Expected New Interface - first dropdown not rendered

Main code with ant design component Row/Col and Select/Option for the dropdown:

render() {
    return (
      <div>
        <Table
          scroll={{ x: 300 }}
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: true,
            pageSizeOptions: ['10', '25', '50'],
          }}
          columns={this.state.columns}
          dataSource={this.state.datas}
        ></Table>

        <Modal
          destroyOnClose={true}
          width={'80%'}
          title='Approval Sequence'
          visible={this.state.isVisible}
          onOk={() => {

            updateFlowType(this.state.currentItem.id, {
              name: this.state.currentItem.name,
              sites: this.state.initTags.map((x) => ({
                idSite: x.id,
                returnToStep: x.returnToStep,
              })),
            })
              .then((r) => {
                notification['sucess']({
                  message: 'Success',
                  description: 'Save data success',
                });
                this.setState({ isVisible: false });
                this.getData();
              })
              .catch(() => {
                notification['failed']({
                  message: 'Failed',
                  description: 'Failed to save',
                });
              });
          }}
          onCancel={() => {
            this.setState({ isVisible: false });
          }}
        >

          <Row gutter={[2, 2]}>
            <Col style={{ textAlign: 'center' }} span={8}>
              <Text strong>Role</Text>
            </Col>
            <Col style={{ textAlign: 'center' }} span={8}>
              <Text strong> Return to Department: </Text>
            </Col>
          </Row>

          <div className='list-area'>
            <div className='drag-list'>
              <DraggableArea
                onChange={(initTags) => this.setState({ initTags })}
                isList
                tags={this.state.initTags}
                render={({ tag }) => (
                  <Row>
                    <Col span={8}>
                      <Button style={{ width: '100%' }}>{tag.name}</Button>
                    </Col>

                    <Col span={16}>
                      <Select
                        onChange={(e) => {
                          //create clone
                          let clone = [...this.state.initTags];
                          
                          let item = clone.find((x) => x.id === tag.id);
                          
                          let itemReject = clone.find((x) => x.name === e);

                          console.log('itemReject', itemReject);
                          //create returnToStep in item 
                          item.returnToStep = itemReject.id;
                          this.setState({
                            initTags: clone,
                          });
                        }}
                        //placeholder = 'Select return step'
                        style={{ width: '100%' }}
                      >
                        {this.getReject(tag.name).map((newTag) => (
                        //getReject function will slice to get only items before the current iteration object (e.g. if current is index 3, only get index 0~2)
                          <Option key={newTag.name} value={newTag.name}>
                            {newTag.name}
                          </Option>
                        ))}
                      </Select>
                    </Col>
                  </Row>
                )}
              ></DraggableArea>
            </div>
          </div>
        </Modal>
      </div>
    );
  }

Answer 1

You can do "conditional render" using a condition and a component like this:

const someBoolean = true;
retrun ( 
    { someBoolean && <SomeComponent /> }
)

if someBoolean is true, then <SomeComponent/> will show.
if someBoolean is false, then <SomeComponent/> will not show.

So, just use that to conditionally render your dropdown column or any other component.

If, the table rows are based upon content and dynamically rendered, then I would modify the content accordingly. (i.e. don't provide the rows you don't want to render).