1

I have global Pagination component where I want to pass custom props with padding, specific only to the component where it's rendered. I want to pass padding props ( last prop ), this is how I pass it:

<PaginationWrapper
            pageOptions={pageOptions}
            pageCount={pageCount}
            gotoPage={gotoPage}
            nextPage={nextPage}
            previousPage={previousPage}
            setPageSize={setPageSize}
            pageIndex={pageIndex}
            pageSize={pageSize}
            padding={'8px'}
        />

This is how I implement it in PaginationWrapper, it should be used only in StyledTxTButton components :

export const PaginationWrapper = (props, { padding }) => {
const { useTranslationFunc } = useTranslationFacade();

return (
    <StyledPaginationWrapper>
        <StyledTxtButton
            onClick={() => props.gotoPage(0)}
            type={'button'}
            padding={padding}
        >
            {'<<'}
        </StyledTxtButton>
        <StyledTxtButton
            onClick={() => props.previousPage()}
            type={'button'}
            padding={padding}
        >
            {useTranslationFunc('Poprzednia')}
        </StyledTxtButton>
        <StyledTxtButton
            onClick={() => props.nextPage()}
            type={'button'}
            padding={padding}
        >
            {useTranslationFunc('Następna')}
        </StyledTxtButton>
        <StyledTxtButton
            onClick={() => props.gotoPage(props.pageCount - 1)}
            type={'button'}
            padding={padding}
        >
            {'>>'}
        </StyledTxtButton>
        <StyledSpan>
            {useTranslationFunc('Strona')}{' '}
            <StyledStrong>
                {props.pageIndex + 1} {useTranslationFunc(' z ')}
                {props.pageOptions.length}
            </StyledStrong>
        </StyledSpan>
        <StyledSelect
            variant="standard"
            value={props.pageSize}
            onChange={(e) => props.setPageSize(Number(e.target.value))}
        >
            {[10, 25, 50, 100].map((option) => (
                <MenuItem key={option} value={option}>
                    <ListItemText>Pokaż {option}</ListItemText>
                </MenuItem>
            ))}
        </StyledSelect>
    </StyledPaginationWrapper>
);

};

And here is how it's implemented in StyledComponents:

type PaginationProps = {
padding?: string;

};

export const StyledTxtButton = styled.a`
    ${(props) => props.theme.breakpoints.up('xs')} {
        margin-top: 0;
        /* padding: 0 12px; */
        padding: ${({ padding }: PaginationProps) =>
            padding ? `0 ${padding}` : `0 12px`};
    }

What I do wrong that passed prop with padding of 8px is not rendered ? It works with any value I put after : in ternary operator so it evidently don't see passed padding prop

marcinb1986
  • 708
  • 1
  • 11
  • 30
  • 1
    I think ur dstructuring is wrong and it should be `export const PaginationWrapper = ({ padding, ...props }) => {` – blessanm86 Mar 13 '22 at 22:02

0 Answers0