Using conditional if in react

Question

I have the following code working fine:

rowData is an object and I want to display download button only if the completePathName is not null and hence I did the following which is working fine. I am wondering if I can improve the following code in some manner or the conditional if that I have used is fine?

buttonTemplate = (rowData: any, column: any)  => {
        //if(typeof rowData !=='undefined' && typeof rowData.completePathName !=='undefined'){
        if(rowData.completePathName === null){
            return (
            
              console.log("Inside first return  - testing rowData:"),
              console.log(rowData),
              console.log(rowData.completePathName),
                <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' />
                            
                        </span>
                </div>
            );

        }
        else {
            return (
                
                console.log("Inside second return  - testing rowData:"),
                console.log(rowData),
                console.log(rowData.completePathName),
            
                <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' />
                            <Button icon="pi pi-download" tooltip='Download' />
                            
                        </span>
                </div>
            );

        }
       
    }

CertainPerformance · Accepted Answer · 2020-11-14 01:51:45Z

The only thing that changes in the JSX is the download button, so it'd be more appropriate to use conditional rendering when the JSX comes to that line to decide whether you need to render the last button or not:

const ButtonTemplate = (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.completePathName !== null &&
              <Button icon="pi pi-download" tooltip='Download' />
            }
        </span>
    </div>
);

Other notes:

Since you don't use the column parameter, you should remove it entirely
Using any defeats the whole point of using TypeScript, since it effectively disables type-checking for that expression - if you can give proper types to things, it'll make your life a whole lot easier. Consider figuring out how you can type rowData. It may look something like:
```
rowData: {
  completePathName: string | null
}
```
(or something similar - just for an example)
If you want to be able to call this as a component, give it an upper-case name: ButtonTemplate, not buttonTemplate. That'll let you do
```
<ButtonTemplate {...{ rowData, column }} />
```
to render it.
You have a lot of inline styles, which makes the JSX harder to read. Consider separating out the style into CSS instead. With Sass, you could give the container a class of buttons-container, and then do:
```
.buttons-container {
    text-align: center;
    width: 6em;
    button:not([tooltip="Download"]) {
        margin-right: 5px;
   }
}
```
and remove all the inline styles from the JSX.

Stack Exchange Network

Using conditional if in react

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Using conditional if in react

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions