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