import React , { useState } from 'react' ; import * as Styled from './FilterOption.styles' ; import { ArticleSortingOption } from '../../../types/redux/articles-reducer-types' ; export type Props = { variant : 'sortingOption' ; sortingTag : ArticleSortingOption ; action : ( sortingOption : ArticleSortingOption ) => void ; } | { variant : 'filterOption' ; filterTag : string ; action : ( filterOption : string ) => void ; } ; function param { enum } variant param { string } sortingTag param { string } filterOption param { function } action returns { JSX . Element } const FilterOption = ( props ) : JSX . Element => { const [ isActive , setIsActive ] = useState < boolean > ( false ) ; const handleClick = ( ) => { if ( props . variant === 'sortingOption' ) props . action ( props . sortingTag ) ; if ( props . variant === 'filterOption' ) props . action ( props . filterTag ) ; setIsActive ( ( prev ) => ! prev ) ; } ; return ( < Styled . Container isActive = { isActive } onClick = { handleClick } > { props . children } < /Styled.Container>); } ; export default FilterOption ;