render() {

   if(defect.defect_status=='open') {
  statusRender = <button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
} else {
  statusRender = {defect.defect_status};
}
      return (
        <div>
        <table className="table table-bordered table-hover">
           <thead>
            <tr>
              <th>Defect ID</th>
              <th>Category</th>
              <th>Description</th>
              <th>Priority</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
        {this.state.defectList.map((defect,index) =>{
         return(
         <tr key={index}>
        <td> {defect.defect_id}  </td>
        <td>{defect.defect_category}</td>
        <td>{ defect.defect_description}</td>
        <td>{ defect.defect_priority}</td>
        <td> {statusRender}
          </td>
       </tr>
         );
        })
}
</tbody>
     </table>
          </div>
          )


  }
}

{this.state.defectList.map((defect,index) => {
 return (
    <tr key={index}>
      <td> {defect.defect_id}  </td>
      <td>{defect.defect_category}</td>
      <td>{ defect.defect_description}</td>
      <td>{ defect.defect_priority}</td>
      <td>
        {
          defect.defect_status === 'open'
           ? <button key={index} data-id={defect.id} onClick = {() => this.showAlert(defect.defect_id)}>{defect.defect_status}</button>;
           : defect.defect_status;
        }
      </td>
    </tr>
   );
 })
}