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

Solution 1:

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;mageURL:string }) => (
 <div className='menu-item'>
    <div className='content'>
        <h1 className='title'>{ title }</h1>
        <span className='subtitle'>SHOP NOW</span>
    </div>
  </div>
);