About an issue I solved by using React Hooks

I used React Hooks 3days ago for the first time. I have had a curiosity about React Hooks and I had a reason I didn’t want to use Class. So, I tried it. I have summarized the knowledge I got.

About an issue

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
             key={task.id}
             {...task}
             expired={selectExpiredTasks(task)}
             onClick={() => {dispatch(finishTask(task.id, { isFinished: true }, checkedBy))}}
          />
        );
      })}
    </div>
  );
};

I have been making todo list. Also, The code above is the top page. This page displays the list of todos. Each todo has “finished” button. When a user pushes the button, the todo disappears from top page and appears in “finished todo page”. I thought of adding new function to this flow. That is displaying modal. This new function came from the opinion that many users want to know who checks whether a todo is finished properly or not. The modal has text form and users must input name who checked the todo. By doing so, users can know who checked the todo in the “finished todo page” Each “finished todo” has “checkedBy” key.

Firstly, I wrote the code below.

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
            key={task.id}
            {...task}
            expired={selectExpiredTasks(task)}
           /* I didn't know what code to write in this place*/
            /* onClick={() => {displayModal(true)}} */

          />
        );     
      })}
      <FinishModal
        isOpen={true}
        finishTask={checkedBy => dispatch(finishTask(task.id, { isFinished: true }, checkedBy))}   
      />
    </div>
  );
};

However, in this case, Finished Modal can’t understand task.id. I selected React Hooks because Class would make the code fatter and take much time to change the current code to stateful code.

How to use React Hooks

STEP 1

import “useState”

import React, { useState } from 'react';

STEP 2

define initial state, state and a function to change the state.

const [modalIsOpen, displayModal] = useState(false);
const [taskId, selectId] = useState(0);

In this case, modalIsOpen and taskId are states, displayModal and selectId are functions and the initial states are false and 0. We can change the states by using displayModal and selectId.

The final code

const IndexTaskPage = ({ dispatch, tasks }: Props) => {
  const [modalIsOpen, displayModal] = useState(false);
  const [taskId, selectId] = useState(0);
  return (
    <div>
      {tasks.map((task) => {
        if (task.isFinished) return null;
        return (
          <TaskItem
            key={task.id}
            {...task}
            expired={selectExpiredTasks(task)}
            onClick={() => {
              displayModal(true);
              selectId(task.id);
            }}
          />
        );
      })}
      <FinishModal
        isOpen={modalIsOpen}
        finishTask={checkedBy => dispatch(finishTask(taskId, { isFinished: true }, checkedBy))}
      />
    </div>
  );
};

FinishModal can understand task.id in this code.

If you think this article good, please follow me!

I update articles once a week!

https://twitter.com/tomoharutsutsum