Tengo un componente en una aplicación de React llamado ViewSwitcher que permite al usuario cambiar entre diferentes vistas y, por lo tanto, representar contenido en función de esa vista. Se parece a esto:

Quiero poder reutilizar este componente en varios componentes principales diferentes. Entonces, ViewSwitcher tiene un accesorio llamado componente que rastrea desde qué componente principal se está procesando. Cada ViewSwitcher tiene botones específicos que también se configuran en el componente principal a través de una matriz llamada botones.

 const buttons = ['Inbox', 'Sent', 'Drafts']; <ViewSwitcher buttons={buttons} component='notifications' />

Cuando se hace clic en un botón, la interfaz de usuario es diferente (contorno naranja) frente a cuando no se hace clic (contorno gris). Para determinar en qué botón se hace clic, tengo un estado en el componente ViewSwitcher llamado localViews.

 const [localViews, setLocalViews] = useState({ roster: 'board', schedule: 'jobs', jobManagement: 'table', notifications: 'inbox', });

Quiero hacer referencia al valor de claves específicas en el estado localViews para determinar si mostrar un ClickedButton o un ViewButton. Entonces, por ejemplo, en el estado inicial que se muestra arriba, cuando ViewSwitcher se procesa desde el componente de notificaciones, el botón 'bandeja de entrada' se representaría como ClickedButton y los otros dos (es decir, 'enviado' y 'borradores') como ViewButtons.

Mi pregunta es ¿cómo puedo hacer referencia a la clave relevante en localViews para determinar qué tipo de botón mostrar? Intenté lo siguiente, pero esto solo arroja un error:

 <ButtonGroup aria-label='outlined primary button group'> {buttons.map((button) => localViews[component].toLowerCase() === button.toLowerCase() ? ( <ClickedButton>{button}</ClickedButton> ) : ( <ViewButton>{button}</ViewButton> ), )} </ButtonGroup>