Typescript error: Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'

Question

I'm new to Typescript and I'm having a hard time trying to understand why my code isn't working.

I'm trying to build a carousel image gallery using react and typescript and i'm having problems when I try to use "onClick" on the left and right arrows for navigation.

I get the following errors:

Type '{ onClick: () => void; }' '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes' . Property 'onClick' does not exist on type 'IntrinsicAttributes' .

Here's my code:

const Carousel = ({ slides }) => {
   
    return (
        <section className="slider">

            <ArrowRight onClick = {nextSlide} /> //The error is here!
            <ArrowLeft onClick = { () => prevSlide() } /> //and here!

            {slides.map((slide, index) => {
                return (
                    <div className="img-slide">
                        <img src={slide.image} />
                        <div className="rolo-slide">
                            {/* <img src={slide.image} onClick={slides.setCurrent(index)} /> */}
                        </div>
                    </div>
                )
            })}
        </section>
    )
}
export default Carousel

Here's what ArrowLeft and Right are, they're just a span, I made the arrows using CSS.

function ArrowLeft() {
    return (
        <span className="arrow left"></span>
    )
}

Answer 1

Your ArrowLeft doesn't accept any props at all, so TypeScript won't let you assign an onClick prop to it that it doesn't accept.

Update ArrowLeft so it accepts an onClick handler. For functional components I usually use function expressions rather than declarations:

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = ({onClick}) => {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

Some notes on that:

• React.FC is an alias for React.FunctionComponent . It tells TypeScript that ArrowLeft is a function component.
• React.FC has an optional type parameter to specify the type of the props that the functional component expects (they'll be combined with the usual props). The <> after React.FC provides a type argument describing the props object this functional component accepts.
• onClick?: says the onClick prop is optional.
• React.MouseEventHandler<HTMLElement> says that the type of the prop (if it's given) is a mouse event handler for an HTML element.
• Notice how I've forwarded the onClick handler on to the span so that it does get called when the span is clicked.

I've used an arrow function because they're (slightly) lighter-weight than traditional functions, but you can use a traditional function if you prefer:

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = function({onClick}) {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

---

BTW: Don't worry about memorizing all of these types. You'll want to know React.FC of course (or React.Component for class components), but for instance for the onClick above you don't have to magically know it. In any decent IDE, you could start out with that not there and do this:

// To start with
const ArrowLeft: React.FC = () => {
    return (
        <span className="arrow left" onClick={}></span>
    );
};

...then hover your mouse over the onClick part in the span . My IDE (VS Code) tells me that the type of onClick is React.MouseEventHandler<HTMLSpanElement> | undefined React.MouseEventHandler<HTMLSpanElement> | undefined :

The | undefined | undefined part I handled in the props by using ? to make it optional, and I changed HTMLSpanElement to just the more general HTMLElement because there wasn't any need for the code using ArrowLeft to know that it uses a span , specifically, vs. a div or i or whatever.