React/Typescript - expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'. TS622

Question

I have this component:

const TheBarTitle = (
    theClass: any,
    columnTitle: string,
    onClickAction: any,
) => {
    return (
        <div
            className={theClass}
            title="Click to add this filter"
            onClick={onClickAction}
        >
            {columnTitle}
        </div>
    );
};

Which is used this way:

 render: (rowData): any => {
                                return (
                                    <div className={classes.contentxyz}>
                                        .........                                    </div>
                                );
                            },
                        },
                        {
                            title: (
                                <TheBarTitle
                                    theClass={classes.contentxyz}
                                    columnTitle="THIS IS THE TITLE"
                                    onClickAction={(e: any) =>
                                        this.handleTooltip(
                                            e,
                                            'theeetitle:',
                                        )
                                    }
                                />
                            ),

....

However I get the error: Tag 'TheBarTitle' expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'. TS622

I am using actually 3 arguments. Any idea what I am doing wrong and it sees only 2?

Answer 1

You are mixing function call with compoent creation methods. Change TheBarTitle to a FunctionComponent creation method

interface Props {
  theClass: any
  columnTitle: string
  onClickAction: any
}
const TheBarTitle: React.FC<Props> = ({theClass, columnTitle, onClickAction}) => {
  return (
    <div
      className={theClass}
      title="Click to add this filter"
      onClick={onClickAction}
    >
      {columnTitle}
    </div>
  )
}

Or your call to the function to this:

title: TheBarTitle(classes.contentxyz, "THIS IS THE TITLE", (e: any) =>
    this.handleTooltip(e, 'theeetitle:')
    ))

For the latter I would suggest to also change the casing on the naming.

Answer 2

Complementary answer to the above one:

const TheBarTitle = (
    theClass: any,
    columnTitle: string,
    onClickAction: any,
) => {
    return ( ... );
};

For a component: What you have between your parentheses are arguments which we provide to functions, whereas React is expecting only 2 possible values ( objects ) ==> hence no values as params like quoted in the above )

• props: being an object
• children?: being a non-obligatory object

What you want to do is using:

• either the props params that react provides in order to access your props with dot notation,
• either the destructuring to access straight away your props ( ==> in between parentheses having curly braces in which you access your props )

It should have been:

interface Props {
  theClass: any
  columnTitle: string
  onClickAction: any
}

// Regular 
const TheBarTitle = ( props: Props ) => {
  const { ... } = props // or props.[YOUR PROPS] to access your named props
  return ( ... );
};

// Destructuring version 
const TheBarTitle = ({
    theClass,
    columnTitle,
    onClickAction,
} : Props ) => { return ( ... ); };