Converting react class component to hooks component

React
1

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;

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

2

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.