React Todoリストの情報を「localStorage」に保存して、画面を更新してもデータが残るようにしたい

Question

実現したいこと

• Todoリストの情報を「localStorage」に保存して、画面を更新してもデータが残るようにしたい

前提

Reactで簡単なTodoListを作成しています。
親コンポーネント：App.js
子コンポーネント：Input.js/TodoList.js/Button.js
で生成しています。

該当のソースコード

import './App.css';
import { useState } from 'react';
import Input from './components/Input';
import TodoList from './components/TodoList';

function App() {

  const [taskList, setTaskList] = useState([]);

    return (
      <div className='List'>
        <div className='inner'>
          <h1>今日やること</h1>
          <div>
            <Input taskList = {taskList} setTaskList = {setTaskList} />
            <TodoList taskList = {taskList} setTaskList = {setTaskList} />
          </div>   
        </div>
      </div>
  );
}

export default App;

import { useState } from 'react';
import Button from "../components/Button";
import '../App.css';

const Input = ({taskList, setTaskList}) => {

  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (inputText.length !== 0) {
      setTaskList([
        ...taskList,
        {
          id: taskList.length,
          text: inputText,
          completed: false
        }
      ]);
      console.log(taskList);
      setInputText('');
    }
  }

  const handleChange = (e) => {
    setInputText(e.target.value);
  }


  return (
    <div className='input'>
      <form onSubmit = {handleSubmit}>
        <input type='text' onChange={handleChange} value={inputText} />
        <Button 
          backgroundColor={inputText ? '#008CFF' : '#C1C1C1'} 
          btnText="追加"  
          marginLeft='20px'>
        </Button>
      </form>
    </div>
  )
};


export default Input;

import { useState } from "react";
import Button from "../components/Button";


const TodoList = ({taskList, setTaskList}) => {

  const handleDelete = (id) => {
    setTaskList(taskList.filter((task) => task.id !== id));
  }

  const handleCompleted = (id) => {
    setTaskList(taskList.map((task) => {
      if(id === task.id){
        return {
          ...task,
          completed: !task.completed
        };
      }
      return task;
    }))
  };


  return (
    <div className='todoList'>
      <div className='todos'>
        {taskList.map((task, index) => (
          <div className={`todo ${task.completed ? 'completed' : ''}`} key={index}>
            <div className='todoText'>
              <span>{task.text}</span>
            </div>
            <Button 
              eventClick={() => handleDelete(task.id)} 
              btnText="削除"
              backgroundColor="#FF3700" >
            </Button>
            <Button 
              eventClick={() => handleCompleted(task.id)} 
              btnText="完了"
              backgroundColor={task.completed ? '#C1C1C1' : '#008CFF'}
              marginLeft='20px'>
            </Button>
          </div>
        ))}
      </div>
    </div>

  )
}


export default TodoList;

import styled from 'styled-components';

const StyleButton = styled.button ({
  border: 'none',
  borderRadius: '4px',
  fontFamily: 'ヒラギノ丸ゴ ProN',
  fontWeight: '400',
  fontSize: '14px',
  color: '#FFFFFF',
  width: '57px',
  height: '32px',
})


const Button = (props) => {
  const contentstyle ={
    backgroundColor: props.backgroundColor,
    marginLeft: props.marginLeft,
  };


  return (
    <>
      <StyleButton onClick={props.eventClick} style={contentstyle} >{props.btnText}</StyleButton >
    </>
  )
};

export default Button;

試したこと

// 取得
localStorage.getItem('key')

// 保存
localStorage.setItem('key', 'value');

// 削除
localStorage.removeItem('key');

上記を使って設定していくというところまでは分かりましたが、何をどこに書いていけばいいか分かりません。

補足情報（FW/ツールのバージョンなど）

React初心者です。
宜しくお願い致します。

Answer 1

ひとつのやり方としては、setTaskListでタスクリストを更新するときにその都度、更新後のタスクリストをローカルストレージに保存しておくことです。そうすれば初期表示やブラウザのリロード時にローカルストレージに保存されているリストを復元してステートの初期値（より正確にはコンポネントの初回レンダリング時に更新する値）として使えます。

これを実現する方法としてはカスタムフックを作って、ローカルストレージとのやり取りをフックの中に閉じ込めてコンポーネントからは見えなくすることで、既存のコードへの修正を最小限にすることができます。

以下はこのやり方の一例です。

hooks/useTaskList.js

hooks/ というサブディレクトリを作り、その中に以下ののような内容の useTaskList.js というファイルを新規作成します。

import { useEffect, useState } from 'react';

const useTaskList = () => {
  const [taskList, _setTaskList] = useState([]);

  useEffect(() => {
    const storedTaskList = localStorage.getItem('taskList');
    if (storedTaskList) {
      _setTaskList(JSON.parse(storedTaskList));
    }
  }, []);

  const setTaskList = (tasks) => {
    _setTaskList(tasks);
    localStorage.setItem('taskList', JSON.stringify(tasks));
  }

  return [taskList, setTaskList];
};

export default useTaskList;

App.js

React標準の useState を使っていた行を、上記のカスタムフックを使うように修正します。

 import './App.css';
-import { useState } from 'react';
+import useTaskList from './hooks/useTaskList';
 import Input from './components/Input';
 import TodoList from './components/TodoList';
 
 function App() {
 
-   const [taskList, setTaskList] = useState([]);
+  const [taskList, setTaskList] = useTaskList();
 
   return (
     <div className='List'>

Comments

[anpanchi]

いつも分かりやすくご丁寧なご回答ありがとうございます！

ご教授いただいた方法を実装したところ、下記のエラーが表示されました。
Error : ”You attempted to import ../hooks/useTaskList which falls outside of the project src/ directory. R”elative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project’s node_modules/.

src/ ディレクトリの外にあるものをインポートしようとしたとありますが、
下記のように、srcにhooksディレクトリを作成しました。
src
-componets
-hooks

こちらの解決策はありますでしょうか...?

[退会済みユーザー]

エラーメッセージの中に
Error : ”You attempted to import ../hooks/useTaskList which ･･･
とあります。
これで指摘されていることから、App.js の中で useTaskList をインポートする行を

import useTaskList from '../hooks/useTaskList';

というふうに、/hooks の前のドットを2個書いてしまっていないでしょうか？
もしこう書いているのであれば、ドットを1個消して

import useTaskList from './hooks/useTaskList';

に修正すればエラーが解消されるように思えます。

[anpanchi]

ドットを1個にしたらできました！！
ご確認いただきありがとうございます！！