CODEWITHSUNDEEP
reactjsreact-hooks
Gabrielko
Gabrielko

Reputation: 11

Refactor states with hooks

I am trying to refactor simply code with hardcoded initial state, but I am new to React Hooks.

const TimersDashboard = () => {
  const [timers, timersChange] = useState(0)


  React.state = {
    timers: [
      {
        id: UUID.v4(),
        activity: 'Testing activity',
        description: 'Lorem ipsum kraf maga',
        elapsed: '0',
        runningSince: Date.now(),
      },
      {
        id: UUID.v4(),
        activity: 'Next activity',
        description: 'Lorem ipsum kung fu',
        elapsed: '0',
        runningSince: Date.now(),
      }
    ]
  }

  return (
    <div className='ui three column centered grid'>
      <div className='column'>
        <TimersList
          timers={this.state.timers} 
        />
        <NewTimerTool
          isOpen={false}
        />
      </div>    
    </div>
  );
}

I have problem to rewrite initial state with Hooks.

Upvotes: 0

Views: 76

Answers (1)

Proxy
Proxy

Reputation: 81

You are using a functional component u can only use Hooks. React.state is only for class components. If you want your intial React.state initialize it like this

const [timers, setTimers] = useState([
  {
    id: UUID.v4(),
    activity: "Testing activity",
    description: "Lorem ipsum kraf maga",
    elapsed: "0",
    runningSince: Date.now(),
  },
  {
    id: UUID.v4(),
    activity: "Next activity",
    description: "Lorem ipsum kung fu",
    elapsed: "0",
    runningSince: Date.now(),
  },
]);

In TimersList just get the values of the useState like this <TimersList timers={timers}/>.

Upvotes: 2

Related Questions