text: import React, { Component } from "react";
  import "./App.css";
  import Navbar from "./components/navbar";
  import Counters from "./components/counters";
  
  class App extends Component {
    state = {
      counters: [
        { id: 1, value: 4 },
        { id: 2, value: 5 },
        { id: 3, value: 0 },
        { id: 4, value: 0 }
      ]
    };
  
    handleIncrement = counter => {
      console.log("increment");
  
      const counters = [...this.state.counters];
      const index = counters.indexOf(counter);
      counters[index] = { ...counter };
      counters[index].value++;
  
      this.setState({ counters });
    };
  
    handleReset = () => {
      console.log("Reset");
  
      const counters = this.state.counters.map(c => {
        c.value = 0;
        return c;
      });
  
      this.setState({ counters });
    };
  
    handleDelte = counterId => {
      console.log("delete", counterId);
  
      const counters = this.state.counters.filter(
        counter => counter.id !== counterId
      );
  
      this.setState({ counters });
    };
  
    render() {
      return (
        <React.Fragment>
          <Navbar
            totalCounters={this.state.counters.filter(c => c.value > 0).length}
          />
          <main className="container">
            <Counters
              counters={this.state.counters}
              onReset={this.handleReset}
              onIncrement={this.handleIncrement}
              onDelete={this.handleDelte}
            />
          </main>
        </React.Fragment>
      );
    }
  }
  
  export default App;
  