title: React with TypeScript: Type is not assignable to type 'IntrinsicAttributes'
body: <p>I have a component in React that shows a pagination of products. I cannot figure out why I am getting this error when I'm trying to run the application:</p>
  
  <blockquote>
  <pre><code>React with TypeScript: Type '{ postsPerPage: number; totalPosts: number; paginate: (pageNumber: number) =&gt; void; }' is not assignable to type 'IntrinsicAttributes &amp; ProductListProps'.   Property 'postsPerPage' does not exist on type 'IntrinsicAttributes &amp; ProductListProps'.
  </code></pre>
  </blockquote>
  
  <p>My code:</p>
  
  <pre><code>const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = data.slice(indexOfFirstPost, indexOfLastPost);
  
  
  const paginate = (pageNumber: number) =&gt; setCurrentPage(pageNumber);
  
  return (
        &lt;&gt;
          &lt;h1 className="headline"&gt;SHOP&lt;/h1&gt;
          &lt;div className="total"&gt;Total: ${totalPrice}&lt;/div&gt;
  
          &lt;ProductList products={data} onProductAddRequest={onProductAdded} posts={currentPosts}/&gt;
  
          &lt;Pagin postsPerPage={postsPerPage} totalPosts={data.length} paginate={paginate} /&gt;
  
       &lt;/&gt;
  </code></pre>
  
  <p>My component look like this:</p>
  
  <pre><code>interface PaginProps {
      postsPerPage: number,
      totalPosts: number,
      paginate: (arg: number) =&gt; void
  }
  
  const Pagin = ( {postsPerPage, totalPosts, paginate}: PaginProps ) =&gt; {
  
      const pageNumbers = [];
  
      for (let i = 1; i &lt;= Math.ceil (totalPosts / postsPerPage); i++) {
          pageNumbers.push(i);
      }
  
      const pageNum = pageNumbers.map(number =&gt; {
          return &lt;div className='a page-item' key={number}&gt;&lt;a className='a' onClick={() =&gt; paginate(number)} href="!#"&gt;{number}&lt;/a&gt;
              &lt;/div&gt;
      })
  
      return (&lt;div className='pagin'&gt;{pageNum}&lt;/div&gt;)
  } 
  
  export default Pagin;
  </code></pre>
  
  <p>My <code>ProductListProps</code> look like this:</p>
  
  <pre><code>interface ProductListProps {
      products: ProductType[];
      posts: any[];
      onProductAddRequest: (product: ProductType) =&gt; void
  }
  
  interface ProductType {
      id: number;
      category: string;
      images?: string[];
      name: string;
      price: number;
      description?: string;
  }
  
  </code></pre>
  
  <p>I can't find what's the problem here</p>