# Converting react class component to hooks component

**URL:** <https://forum.codewithmosh.com/t/converting-react-class-component-to-hooks-component/7482>\
**Category:** React\
**Created:** [September 23, 2021, 2:24am UTC](https://forum.codewithmosh.com/t/converting-react-class-component-to-hooks-component/7482 "2021-09-23T02:24:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kunalP](https://avatars.discourse-cdn.com/v4/letter/k/59ef9b/32.png) [@kunalP](https://forum.codewithmosh.com/u/kunalP)\
**Post date:** [September 23, 2021, 2:24am UTC](https://forum.codewithmosh.com/t/converting-react-class-component-to-hooks-component/7482/1 "2021-09-23T02:24:41Z")

</div>

Hi,

As the mosh has done counter application by using class component, i am doing it by using hooks component, but i am getting error. can anyone let me know what i am missing…

///////////////

import React ,{useState} from ‘react’;

import ‘./App.css’;

import Counters from ‘./component/counters’;

import Navbar from ‘./component/navbar’;

function App(props) {

const initialState = [

```
{ id: 1, value: 0 },

{ id: 2, value: 10 },

{ id: 3, value: 20 },

{ id: 4, value: 30 },

```

];

const [counters, setCounters] = useState(initialState);

const handleIncrement = (counter) =\> {

```
// const counters = [...counters];

// const index = counters.indexOf(counter);

// counters[index] = { ...counter };

// counters[index].value++;

setCounters({ counter : counter.value +1 });

```

};

const handleDecrement = (counter) =\> {

// // const counters = […counters];

// const index = counters.indexOf(counter);

// counters[index] = { …counter };

// counters[index].value–;

// setCounters({ counters });

};

const handleDelete = (counterId) =\> {

// const counters = counters.filter((c) =\> c.id !== counterId);

// setCounters({ counters });

};

```
return (

  <div className="container">

    {/* <Navbar totalCounters={counters.reduce((a,c)=>a + c.value,0 )}/> */}

    <Navbar totalCounters={counters.filter((c) => c.value > 0).count()}/>

    <Counters 

        counters={counters}

        onIncrement={handleIncrement}

        onDecrement={handleDecrement}

        onDelete={handleDelete} 

        />

  </div>

);

```

}

export default App;

/////////////

---

<div class="post-metadata">

**Author:** ![sufian.babri](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sufian.babri/32/1028_2.png) [@sufian.babri](https://forum.codewithmosh.com/u/sufian.babri)\
**Post date:** [September 26, 2021, 11:50pm UTC](https://forum.codewithmosh.com/t/converting-react-class-component-to-hooks-component/7482/2 "2021-09-26T23:50:24Z")

</div>

Hi

Could you please elaborate on the error that you’re getting, possibly sharing the exact error text? Also please add formatting to the code.