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; }' 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>
    )
}

Please show us the definitions of ArrowRight and ArrowLeft. Ideally, reduce the problem to a minimal reproducible example and post just that code, without extraneous other parts, to the question (and preferably also a link to that same code in the TypeScript playground). That makes it much easier for us to help you. — T.J. Crowder
– T.J. Crowder, Commented Mar 13, 2021 at 9:41
ArrowRight component doesn't have onClick in its props typing definition. — Ajeet Shah
– Ajeet Shah, Commented Mar 13, 2021 at 9:42
@zerkms that's the type that represents the properties shared by all jsx elements. Ie, it looks like they havn't given a type to ArrowRight or ArrowLeft, and so it's saying "not all elements have an onClick" — Nicholas Tower
– Nicholas Tower, Commented Mar 13, 2021 at 9:42
@T.J.Crowder, Oh, I'm sorry, I'll make sure to keep that in mind next time! I just updated the code with the ArrowRight and Left. They're just a span, I made them with CSS because I had a hard time trying to import Font Awesome, because I'm using Gatsby. — Gabriela Turquetti
– Gabriela Turquetti, Commented Mar 13, 2021 at 9:48

T.J. Crowder · Accepted Answer · 2021-03-13 10:03:36Z

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:

The | 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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related