Buttons missing when using same code in react functional component

Question

In a class component(a typescript file), I have the actionTemplate defined in the following manner:

//Inside constructor: 

constructor(props: Props) {
        super(props);
        this.actionTemplate = this.actionTemplate.bind(this);
      

        this.state = {
           //state variables
        };
    }

actionTemplate = (rowData: any) => (
        <div style={{textAlign: 'center', width: '6em'}}>
            <span>
                <Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => this.handleClick(rowData, e)} tooltip='Edit'/>
                <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                {
                  rowData.fullPathName !== null &&
                  <Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
                }
            </span>
        </div>
    );  

const GridView = labelValue => ((this.state.assocVisible || this.state.assetFormVisible)? null: (
            <div>
                <DataTable
                   //some datable properties
                >
                    <Column key='actionButton' field='actionButton' header='Action' body={this.actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
                    {dynamicColumns}
                </DataTable>
               
            </div>
        ))

However, I am using the same thing in a functional component without a class and I did the following ( as suggested in this thread - using arrow function):

actionTemplate = (rowData) => (
    <div style={{textAlign: 'center', width: '6em'}}>
        <span>
            <Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
            <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
            {
              rowData.fullPathName !== null &&
              <Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
            }
        </span>
    </div>
);

const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
        <div>
            <DataTable
                //some datable properties 
            >
                <Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
                {dynamicColumns}
            </DataTable>
            {/* {assocButtonView(labelValue)} */}
        </div>
    ))

And it keeps on throwing following error:

Uncaught ReferenceError: assignment to undeclared variable actionTemplate

When I added var in front of actionTemplate, it didn't throw any error, but I don't see any buttons in my Action column. What am I missing ?

Robert Tirta · Accepted Answer · 2021-06-04 03:25:40Z

1

In functional component, you are not declaring another function, you have to assign the function to a variable.

So this is the correct syntax:

const actionTemplate = (rowData) => (
    <div style={{textAlign: 'center', width: '6em'}}>
        <span>
            <Button type='button' icon="pi pi-pencil" style={{marginRight: '5px'}} onClick={(e) => handleClick(rowData, e)} tooltip='Edit'/>
            <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
            {
              rowData.fullPathName !== null &&
              <Button icon="pi pi-download" tooltip='Download' onClick={(e) => handleDownloadClick(rowData, e)} />
            }
        </span>
    </div>
);

const GridView = labelValue => ((assocVisible[0] || assetFormVisible[0])? null: (
        <div>
            <DataTable
                //some datable properties 
            >
                <Column key='actionButton' field='actionButton' header='Action' body={actionTemplate} style={{maxHeight: '30px !important', whiteSpace: 'nowrap', overflow: 'hidden'}}/>
                {dynamicColumns}
            </DataTable>
            {/* {assocButtonView(labelValue)} */}
        </div>
    ))

answered Jun 4, 2021 at 3:25

Robert Tirta

2,9193 gold badges23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tan Over a year ago

Thanks. This doesn't throw any error. However, the buttons are still missing from the Action column. Any idea why?

Tan Over a year ago

I am wondering if I am calling the actionTemplate properly? Like in class component, it gets called like this body={this.actionTemplate} and in functional component, I am doing it like this ` body={actionTemplate}`

Robert Tirta Over a year ago

can you share the codeSandbox? I'm not able to debug that for you otherwise

Collectives™ on Stack Overflow

Buttons missing when using same code in react functional component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related