title: Typescript + React - No overload matches this call
body: <p>I am kind of new with React + Typescript and I'm trying to update the four counters that I have created depending on what their value is.
  Every counter has a key that is connected to their id inside an array as you can see.  </p>
  
  <p>However when I try to add: <code>value={counter.value}</code> so that the value will update and not start at zero every time, then I get this message:</p>
  
  <pre><code>" No overload matches this call.
    Overload 1 of 2, '(props: Readonly&lt;{}&gt;): Counter', gave the following error.
      Type '{ key: number; value: number; }' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Counter&gt; &amp; Readonly&lt;{}&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt;'.
        Property 'value' does not exist on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Counter&gt; &amp; Readonly&lt;{}&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt;'.
    Overload 2 of 2, '(props: {}, context?: any): Counter', gave the following error.
      Type '{ key: number; value: number; }' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Counter&gt; &amp; Readonly&lt;{}&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt;'. "
  </code></pre>
  
  <p>I know that there is a question that has been answered that is very similar to this, but I really didn't understand the answer or how to fix it.
  Thank you in advance!</p>
  
  <pre><code>import * as React from "react";
  import { Component } from "react";
  import Counter from "./Hello";
  
  class Counters extends Component {
    state = {
      counters: [
        { id: 1, value: 4 },
        { id: 2, value: 0 },
        { id: 3, value: 0 },
        { id: 4, value: 0 }
      ]
    };
    render() {
      return (
        &lt;div&gt;
          {this.state.counters.map(counter =&gt; (
            &lt;Counter key={counter.id} value={counter.value} /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  export default Counters;
  </code></pre>
  
  <p>Under here is the Counter component:</p>
  
  <pre><code>    import * as React from 'react';
  
  
  export default class Counter extends React.Component {
      state = {
          count: 0,
          tags: [] as number[]
      };
  
      renderTags() {
          if (this.state.tags.length === 0) return &lt;p&gt;There are no tags&lt;/p&gt;
  
          return(
              &lt;ul&gt;
                  {this.state.tags.map(tag =&gt; &lt;li key={tag}&gt;{tag}&lt;/li&gt;)}
              &lt;/ul&gt;
          )
      }
  
      handleIncrement = (product:any) =&gt;{
          this.setState({ count: this.state.count +1 })
          console.log("increment clicked", this.state.count);
  
      }
  
      doHandleIncrement = () =&gt; {
          this.handleIncrement({id:1});
      }
  
      render() { 
  
          return (
  
          &lt;div&gt;
              &lt;span style={this.styles} className={this.getClassName()}&gt;{this.formatCount()}&lt;/span&gt;
              &lt;button onClick={this.doHandleIncrement}&gt;Test&lt;/button&gt;
          &lt;/div&gt;
          );
      }
  
      private getClassName() {
          let classes = "state";
          classes += (this.state.count === 0) ? "Warning" : "Normal";
          return classes;
      }
  
      private formatCount() {
          const {count} = this.state;
          return count === 0 ? "Zero" : count
      }
  };
  </code></pre>