I have a component in a React application called ViewSwitcher that allows the user to switch between different views and thus render content based on that view. It looks like this:

I want to be able to reuse this component in a number of different parent components. So ViewSwitcher has a prop called component that tracks which parent component it is being rendered from. Every ViewSwitcher has specific buttons that are also set in the parent component through an array called buttons.

const buttons = ['Inbox', 'Sent', 'Drafts'];

<ViewSwitcher buttons={buttons} component='notifications' />

When a button is clicked, the UI is different (orange outline) vs when it is not clicked (grey outline). In order to determine which button is clicked, I have state in the ViewSwitcher component called localViews.

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

I want to reference the value of specific keys in the localViews state to determine whether to render a ClickedButton or a ViewButton. So for example, in the initial state shown above, when ViewSwitcher is rendered from the notifications component, the 'inbox' button would render as a ClickedButton and the other two (i.e. 'sent' and 'drafts') as ViewButtons.

My question is how can I reference the relevant key in the localViews to determine which type of button to render? I tried the following but this is just throwing an error:

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