I have a database table like this:

And in my react code, after making an api call(not shown in this post) to this table,the results are stored in the sessionStorage of the browser as Key and Value pair as shown below.

Key : categories

Value:

[{
        "id": 0,
        "value": "Company0",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/0"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/0"
            }
        }
    },
    {
        "id": 1,
        "value": "Company1",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/1"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/1"
            }
        }
    },
    {
        "id": 2,
        "value": "Company2",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/2"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/2"
            }
        }
    },
    {
        "id": 5,
        "value": "Company 5",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/5"
            }
        }
    },
    {
        "id": 99,
        "value": "Company Other",
        "isEditable": "Y",
        "_links": {
            "self": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"
            },
            "category": {
                "href": "http://mydevserver.com:443/WebServices/api/categories/99"
            }
        }
    }
]

Basically, it looks like the following in browser:

I have the following actionTemplatefunction in react for displaying EDIT, DELETE and DOWNLOAD buttons as shown below:

In the rowData variable, I have access to the categoryId by using rowData.categoryId which is equivalent to the ID column of the above table.

actionTemplate = (rowData: any) => (
        console.log(rowData),
        <div style={{textAlign: 'center', width: '6em'}}>
            <span>
                { JSON.parse(sessionStorage.getItem('categories') as string)[rowData.categoryId].isEditable === 'N' ?
                   <Button icon="pi pi-trash" style={{marginRight: '5px'}} tooltip='Delete' />
                   :
                  <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>
                
                }
               

                {
                       rowData.fullPathName !== null &&
                       <Button icon="pi pi-download" tooltip='Download' onClick={(e) => this.handleDownloadClick(rowData, e)} />
                }
            </span>
            
        </div>
       );

My Requirement:

To not show EDIT button when ISEDITABLE column is set to N. And show the EDIT button when ISEDITABLE column is set to Y.

So, I made the changes in the above function to achieve the above requirement. However, I ran into an issue when the array indexes doesn't match with the ID column of the above table.

For example, the above code runs fine as long as the rowData.categoryId = 0,1 and 2 because till ID = 2 , it matches the array indexes. However, as soon as it reaches ID = 5 or 99, it breaks since array index position for ID = 5 is 4 and for ID = 99 is 5.

Is there a workaround of this problem, other than the approach I used?

CodePudding user response：

Instead of using the index, use .find to find the item you want:

JSON.parse(sessionStorage.getItem('categories') as string).find((category) => {
    return category.id === rowData.categoryId;
});

CodePudding user response：

Because categories is an array of object so you need to using find to get he element you want like this:

{
    JSON.parse(sessionStorage.getItem('categories') as string).find(
        category => category.id === rowData.categoryId
    )?.isEditable === 'N' ? (
        <Button
            icon="pi pi-trash"
            style={{ marginRight: '5px' }}
            tooltip="Delete"
        />
    ) : (
        <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>
    );
}