Quiero mostrar un botón determinado dentro de una tabla de datos en la interfaz de usuario en función de una condición
pseudocódigo
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> Sin embargo, esto está mal. Lanza un 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>¿Por qué no simplificarlo así?
<td> <button type="button" className={assessment.categoryCategory === 'Complete' ? "btn btn-success" : "btn btn-info"}> {assessment.categoryCategory === 'Complete' ? "Complete" : "Not Complete"} </button> </td>