how to use the props when some arguments have a certain value-CodePudding

I am trying out pagination from the react-table component, and I need to use the props for multiple purposes for the pagination function. I have some values (e.g., columns and data) will be using the useMemo() and others will stand by (sort of). However, I get a Syntax error: Argument name clash, I noticed that the ...props perhaps has perhaps overlapped with the variables, but I tried to arrange them and it didn't seem to work. What should I do in this case? The interesting part of the code could be shown below:

export const PaginationTable = (props, 
    {
        fetchData,
        pageCount: controlledPageCount,
        loading,
        isPaginated = true,
        ...props
    }) => {
    const columns = useMemo(() => props.columns, [])
    const data = useMemo(() => props.commits, [ props.commits ])

CodePudding user response：

You're declaring two variables with the same name: props and ...props.

When you then do props.columns it's not clear which props you're referring to, hence the error.

React components take props as the first argument, so I'm not sure what you're trying to do with the second one where you're destructuring. I think you just need to remove the first props argument:

export const PaginationTable = ({
        fetchData,
        pageCount: controlledPageCount,
        loading,
        isPaginated = true,
        ...props
    }) => {
    const columns = useMemo(() => props.columns, [])
    const data = useMemo(() => props.commits, [ props.commits ])