title: having trouble seeing increment button in react component
body: <p>I have two componenets , <code>counter</code> and <code>counters</code>. I have a box that shows the value when you click the <code>increment</code> button in my <code>counter</code> component thats not being displayed. I refactored my code so that that my <code>counter</code> component is a <code>controlled</code> component instead of an <code>uncontrolled</code> component so it gets its data from my <code>props</code> object. I will paste the code down below. </p>
  
  <p>Update: I am now able to see the box that has the number of increments but when i click <code>Increment</code> I get <code>Nan</code> displayed in the box for the value.</p>
  
  <p><code>counter component</code></p>
  
  <pre><code>import React, { Component } from "react";
  
  class Counter extends Component {
  // styles for our bootstrap
    styles = {
  fontSize: 30,
  fontWeight: "bold"
   };
  
   render() {
    console.log("props", this.props);
     return (
    &lt;div&gt;
      &lt;span className={this.getBadgeColor()}&gt;{this.formatCount()} 
      &lt;/span&gt;
      &lt;button
        onClick={() =&gt; this.props.onIncrement(this.props.counter)}
        className="btn btn-secondary btn-md"
      &gt;
        Increment
      &lt;/button&gt;
  
      &lt;button
        onClick={() =&gt; this.props.onDelete(this.props.counter.id)}
        className="btn btn-danger btn-sm m-2"
      &gt;
        Delete
      &lt;/button&gt;
    &lt;/div&gt;
     );
    }
  
  getBadgeColor() {
  let classes = "badge m-2 badge-";
  classes += this.props.counter.value === 0 ? "warning" : 
  "primary";
  return classes;
   }
  
    formatCount() {
    const { value } = this.props.counter;
    return value === 0 ? &lt;h2&gt; Zero &lt;/h2&gt; : value;
    }
  }
  
  export default Counter;
  </code></pre>
  
  <p><code>counters component</code></p>
  
  <pre><code>import React, { Component } from "react";
  import Counter from "./counter";
  
  class Counters extends Component {
   state = {
    counters: [
    { id: 1, value: 5 },
    { id: 2, value: 0 },
    { id: 3, value: 0 },
    { id: 4, value: 0 }
     ]
   };
  
   handleDelete = counterId =&gt; {
  const counters = this.state.counters.filter(c =&gt; c.id !== 
  counterId);
  this.setState({ counters });
   };
  
   handleReset = () =&gt; {
    const counters = this.state.counters.map(c =&gt; {
    c.value = 0;
    return c;
     });
     this.setState.counters = { counters };
    };
  
  handleIncrement = counter =&gt; {
  const counters = [...this.state.counters];
  const index = counters.indexOf(counter);
  counters[index] = { ...counters };
  counters[index].value++;
  this.setState({ counters });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;button
        onClick={this.handleReset}
        className="btn btn-primary btn-sm m-2"
      &gt;
        Reset
      &lt;/button&gt;
  
      {this.state.counters.map(counters =&gt; (
        &lt;Counter
          key={counters.id}
          onDelete={this.handleDelete}
          counter={counters}
          onIncrement={this.handleIncrement}
        /&gt;
      ))}
    &lt;/div&gt;
      );
    }
  }
  
  export default Counters;
  </code></pre>