How to render a different element based on a condition (react jsx)-CodePudding

I want to show a certain button inside a data table in the UI based on a condition

pseudocode

if assessment.category is complete
//show success button

if assessment.category is not complete
//show failed button

if assessment.category is in progress
//show in progress button

if assessment.category is rejected
//show rejected button

(JSX)

<td>
  {assessment.categoryCategory === 'Complete' && <button type="button" className="btn btn-success">Complete</button> 
  }
  {assessment.categoryCategory === 'Not Complete' && <button type="button" className="btn btn-info">Not Completed</button>
  }
  {assessment.categoryCategory === 'In Progress' && <button type="button" className="btn btn-warning">WIP</button>
  }
  {assessment.categoryCategory === 'Rejected' && <button type="button" className="btn btn-danger">Rejected</button>
  }
</td>

However this is wrong. It throws an error. Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

CodePudding user response：

<td>
  {
   assessment.categoryCategory === 'Complete' ?  (
    <button type="button" className="btn btn-success">Complete</button>
    ) : (
    <button type="button" className="btn btn-info">Not Completed</button>
    )
  }
</td>

CodePudding user response：

Why not simplify it like this?

<td>
  <button type="button" className={assessment.categoryCategory === 'Complete' ? "btn btn-success" : "btn btn-info"}>
    {assessment.categoryCategory === 'Complete' ? "Complete" : "Not Complete"}
  </button>
</td>

CodePudding user response：

const btnMap = {
 complete = { key: 'warning', label: 'Completed' };
 'not complete' = { key: 'info', label: 'Not Completed' };
 progress = { key: 'warning', label: 'WIP'};
 rejected = { key: 'danger', label: 'Rejected' };
 // easy to add additional values if needed.
}
const btnItem = btnMap[assestment.category || 'not progress']; //set a default value if you believe could be undefined.

 <button 
   type="button" 
   className={`btn btn-${btnItem.key}`}>
    {btnItem.label}
 </button>