CODEWITHSUNDEEP
reactjstypescript
radial9174
radial9174

Reputation: 199

React Typescript: Type 'X' is not assignable to type 'IntrinsicAttributes & { properties }. TS2322

I'm trying to pass a prop to a menu item component but I get this error with the imageURL attribute:

Type '{ key: number; title: string; imageURL: string; }' is not assignable to type 'IntrinsicAttributes & { title: string; }'.
Property 'imageURL' does not exist on type 'IntrinsicAttributes & { title: string; }'.  TS2322

It looks like there is a type mismatch for imageURL but I can't seem to find the solution. Here are the relevant components:

MenuItem.tsx

import React from 'react';
import './MenuItem.scss'

const MenuItem = ({ title }:{ title:string }) => (
    <div className='menu-item'>
        <div className='content'>
            <h1 className='title'>{title}</h1>
            <span className='subtitle'>SHOP NOW</span>
        </div>
    </div>
);

export default MenuItem;

Directory.tsx

import React from 'react';
import './Directory.scss';
import MenuItem from '../menuItem/MenuItem';

type MenuItems = {
    title:string;
    imageURL:string;
    id:number
};

class Directory extends React.Component<Object, any> {
    constructor(props:object) {
        super(props);

        this.state = {
            sections: [
                {
                  title: 'category1',
                  imageURL: 'https://website1.com',
                  id: 1
                },
                {
                  title: 'category2',
                  imageURL: 'https://website2.com',
                  id: 2
                },
                {
                  ...
                }
              ]
        };
    };

    render() {
        return (
            <div className='directory-menu'>
                {
                    this.state.sections.map(({ title, imageURL, id }:MenuItems) => (
                        <MenuItem key={id} title={title} imageURL={imageURL} />
                    ))
                }
            </div>
        );
    };
};

export default Directory;

Upvotes: 6

Views: 12792

Answers (1)

Moshe Sommers
Moshe Sommers

Reputation: 1516

You have just ({ title }:{ title:string }) as the props passed in for you're MenuItem component. You need the props to match the type you're using in the component.

This

const MenuItem = ({ title }:{ title:string }) => (
  <div className='menu-item'>
    <div className='content'>
        <h1 className='title'>{title}</h1>
        <span className='subtitle'>SHOP NOW</span>
    </div>
  </div>
);

Should be

const MenuItem = ({ title, imageURL }:{ title: string; imageURL: string }) => (
 <div className='menu-item'>
    <div className='content'>
        <h1 className='title'>{ title }</h1>
        <span className='subtitle'>SHOP NOW</span>
    </div>
  </div>
);

Upvotes: 7

Related Questions