```js
 return (
            <tr key={item.id}>
                <td><Link to={"/risk/view/" + item.id} className="clickable-link">{item.name}</Link></td>
                <td>{item.description ? constructDescription(item.description) : ""}</td>
                <td>{item.riskOwner.firstName + " " + item.riskOwner.lastName}</td>
                <td style={{ color: statusColor }}>{item.formStatus.title}</td>
                <td>{item.entityInherentRisk ? item.entityInherentRisk.displayName : ""}</td>
                <td>{item.entityResidualRisk ? item.entityResidualRisk.displayName : ""}</td>
                <td>
                    {canEdit ?
                        <div><Link to={"/risk/edit/" + item.id} className="clickable-link"><span className="icon icon-file"></span> </Link>
                            <Link to={"/risk/view/" + item.id} className="clickable-link" > | <a href="#" className="clickable-link"><i className="fa fa-eye"></i> </a></Link>
                            {canDelete ? <a href="#" className="clickable-link"> | <i className="icon icon-delete" onClick={() => { this.initiateDelete(item) }}></i> </a> : null}
                        </div> :
                        <Link to={"/risk/view/" + item.id} className="clickable-link"><a href="#"><i className="fa fa-eye"></i> View</a></Link>}
                </td>
            </tr>
            )
```

I have a list of data displayed in my Web page. I would like to add a sort button to that list and would like to sort that list to ascending and descending. how can i do that in react.