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: 0 },
        { id: 3, value: 0 },
        { id: 4, value: 0 },
      ],
    };
  
    handleDelete = (counterId) => {
      const counters = this.state.counters.filter((c) => c.id != counterId);
      // since the key and value is same i.e counters we can write it as...
      // this.setState({counters: counters});
      this.setState({ counters });
    };
  
    handleIncrement = (counter) => {
      const counters = [...this.state.counters];
      const index = counters.indexOf(counter);
      counters[index].value++;
      this.setState({ counters });
    };
  
    handleReset = () => {
      const counters = this.state.counters.map((c) => {
        c.value = 0;
        return c;
      });
      this.setState({ counters });
    };
  
    render() {
      return (
        
        <React.Fragment>
          <NavBar
            counters={this.state.counters.filter((c) => c.value > 0).length}
          />
  
          <main className="container">
            <Counters
              counters={this.state.counters}
              onDelete={this.handleDelete}
              onReset={this.handleReset}
              onIncrement={this.handleIncrement}
            />
          </main>
        </React.Fragment>
      );
    }
  }
  export default App;
  