Quiero mostrar 3 botones adicionales si el usuario actual es el usuario que creó el grupo en el que estoy en este momento, así que probé algo como esto:
render(){ let adminButtons; if (this.state.groupData && this.props.user.id){ if(this.state.groupData.owner === this.props.user.id){ adminButtons = { <CustomButton>Add Quiz</CustomButton> <CustomButton>Drafts</CustomButton> <CustomButton>Delete Group</CustomButton> }; } else{ adminButtons = <div/>; } } } return( <div className='group-page'> <div className='group-controls'> <div className='admin-buttons'> {adminButtons} </div> </div> </div> )}Pero esta implementación genera un error de compilación, ¿cómo podría cambiar el código para que funcione? La experiencia JSX debe tener un elemento principal, es el error que recibo
La respuesta corta es que puede envolver sus componentes en un React.Fragment .
<> <CustomButton>Add Quiz</CustomButton> <CustomButton>Drafts</CustomButton> <CustomButton>Delete Group</CustomButton> </>Según los documentos:
Un patrón común en React es que un componente devuelva múltiples elementos. Los fragmentos le permiten agrupar una lista de elementos secundarios sin agregar nodos adicionales al DOM.
aquí necesitas un cambio menor
adminButtons = { <CustomButton>Add Quiz</CustomButton> <CustomButton>Drafts</CustomButton> <CustomButton>Delete Group</CustomButton> }; }a
adminButtons = [ <CustomButton>Add Quiz</CustomButton> <CustomButton>Drafts</CustomButton> <CustomButton>Delete Group</CustomButton> }; ] Idealmente, JSX necesita elementos de cadena, nulos, html/jsx o una matriz de cualquiera de estos. estás usando un objeto, es por eso que tienes errores de compilación.
render() { let adminButtons; if (this.state.groupData && this.props.user.id){ if (this.state.groupData.owner === this.props.user.id){ adminButtons = [ <CustomButton>Add Quiz</CustomButton>, <CustomButton>Drafts</CustomButton>, <CustomButton>Delete Group</CustomButton> ]; } else { adminButtons = <div/>; } } return( <div className='group-page'> <div className='group-controls'> <div className='admin-buttons'> {adminButtons} </div> </div> </div> )}