import React from 'react' ; interface NavBarProps { setTab : React . Dispatch < React . SetStateAction < string > > ; tabsList : string [ ] ; tab : string ; } const NavBar = ( { setTab , tabsList , tab } ) => { const renderedTabButtons = tabsList . reduce < JSX . Element [ ] > ( ( acc , tabName ) => { acc . push ( < button className = "navBarButtons" key = { tabName } style = { tab === tabName ? { color : '#E6E6E6' , backgroundColor : '#212121' } : { color : '#989898' } } onClick = { ( ) => { setTab ( tabName ) ; } } > { tabName } < /button>); return acc ; } , [ ] ) ; return < div className = "NavBar" > { renderedTabButtons } < /div>; } ; export default NavBar ;