ReactでTodoリスト作成。検索やソートで苦戦しています。

Question

####ReactでTodoリスト作成しています。表示まではできましたが、ソートや絞り込み検索機能で苦戦しています。
###●したいこと1：絞り込み検索（input）入力wordでローカルストレージより該当リストを取得、表示。
###●したいこと2：新着順、期限順、重要度順（deadlineやtag）でローカルストレージより該当リストを並び替え、表示。

import './App.css';

import React from 'react';

const App = () => (<Todo></Todo>)

const todos = [];

function TodoHeader(props) {
    const remaining = props.todos.filter(todo => {
        return !todo.isDone;
    });

    return (
        <div>
            <h1>
                Todoリスト
            </h1 >
            <div> 未完了 / リスト数({remaining.length}/{props.todos.length})</div>
            <button onClick={props.purge}>チェックしたリストを消去</button>
        </div>
    )
}

function TodoItem(props) {
    return (
        <li key={props.todo.id}>
            <label>
                <input type="checkbox"
                    checked={props.todo.isDone}
                    onChange={() => props.checkTodo(props.todo)}
                />
                <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}：
                    {props.todo.deadline}：
                    {props.todo.task}：
                    {props.todo.tag1}：
                    {props.todo.tag2}
                </span>
            </label>
            <button onClick={() => props.deleteTodo(props.todo)}>消去</button>
        </li>
    );
}


function TodoList(props) {  //入力された内容を表示する時
    const todos = props.todos.map(todo => {
        return (
            <TodoItem
                key={todo.id}
                todo={todo}//属性
                checkTodo={props.checkTodo}
                deleteTodo={props.deleteTodo}
            />
        );
    });
    return (
        <ul>
            {props.todos.length ? todos : <li>Todoリストがありません</li>}
        </ul>
    );
}

function TodoForm(props) {   //入力する箇所

    return (
        <React.Fragment >
            <form onSubmit={props.addTodo} className="container">
                <h3>[ 入力欄 ]</h3>
                <p>タイトル</p>
                <input type='text' name="title" value={props.title} onChange={props.updateItem} placeholder="タイトルを記載"></input>
                <p>期日</p>
                <input type='date' name="deadline" value={props.deadline} onChange={props.updateItem}></input>
                <p>やること内容</p>
                <textarea type='text' name="task" value={props.task} onChange={props.updateItem} placeholder="具体的な内容を記載"></textarea>
                <p>タグ１：</p>
                <select name="tag1" value={props.tag1} onChange={props.updateItem}>
                    <option></option>
                    <option value="数学">数学</option>
                    <option value="英語">英語</option>
                    <option value="国語">国語</option>
                    <option value="理科">理科</option>
                </select>
                <p>タグ２：</p>
                <select name="tag2" value={props.tag2} onChange={props.updateItem}>
                    <option></option>
                    <option value="すぐやる">すぐやる</option>
                    <option value="まぁやる">まぁやる</option>
                    <option value="どちらでも">どちらでも</option>
                    <option value="健忘録">健忘録</option>
                </select>
                <input type='submit' value="リストを追加" ></input>
            </form>
            <div></div>
            <input placeholder="絞り込み検索"></input>
            <button>新着順</button>
            <button>期限順</button>
            <button>重要度順</button>
        </React.Fragment >
    );
}


function getUniqueId() {
    return new Date().getTime().toString(36) + "-" + Math.random().toString(36);
}

class Todo extends React.Component {

    constructor() {
        super()
        this.state = { 
            todos: todos,
            title: "",
            deadline: "",
            task: "",
            tag1: "",
            tag2: ""


        };
        this.checkTodo = this.checkTodo.bind(this);
        this.deleteTodo = this.deleteTodo.bind(this);
        this.updateItem = this.updateItem.bind(this);
        this.addTodo = this.addTodo.bind(this);
        this.purge = this.purge.bind(this);
    }

    purge() {
        
        const todos = this.state.todos.filter(todo => {
            return !todo.isDone;
        });
        this.setState({
            todos: todos
        });
    }

    //Todoを [ 追加する ] 場合の関数
    addTodo = (e) => {
        e.preventDefault();

        const item = {
            id: getUniqueId(),
            title: this.state.title, 
            deadline: this.state.deadline,
            task: this.state.task,
            tag1: this.state.tag1,
            tag2: this.state.tag2,
            isDone: false
        }
        console.log(item);

        const todos = this.state.todos.slice();

        todos.unshift(item);
        this.setState({
            todos: todos,
            item: "",
            title: "",
            deadline: "",
            task: "",
            tag1: "",
            tag2: ""
        });
    }

    //Todoを [ 消去する ] 場合の関数
    deleteTodo(todo) {
        const todos = this.state.todos.slice();
        const pos = this.state.todos.indexOf(todo);

        todos.splice(pos, 1);
        this.setState({
            todos: todos
        });
    }


    //Todoを [ チェックする ] 場合の関数
    checkTodo(todo) {
        const todos = this.state.todos.map(todo => {
            return {
                id: todo.id,
                title: todo.title,
                deadline: todo.deadline,
                task: todo.task,
                tag1: todo.tag1,
                tag2: todo.tag2,
                isDone: todo.isDone
            };
        });

        const pos = this.state.todos.map(todo => {
            return todo.id;
        }).indexOf(todo.id);

        todos[pos].isDone = !todos[pos].isDone;
        this.setState({
            todos: todos
        });
    }

    updateItem = (e) =>
        this.setState({ [e.target.name]: e.target.value });

    componentDidUpdate() {//JSONにtodosを追加する
        localStorage.setItem('todos', JSON.stringify(this.state.todos))
    }
    componentDidMount() {//JSONから取ってくる
        this.setState({
            todos: JSON.parse(localStorage.getItem('todos')) || []
        });
        console.log(JSON.parse(localStorage.getItem('todos'))[0].id.length);
    }

  
    render() {
        return (//関数コンポーネント３つ（TodoHeader,TodoForm,TodoList）
            <div className="container">
                <TodoHeader
                    todos={this.state.todos}
                    purge={this.purge}
                />

                <TodoForm
                    item={this.state.item}
                    title={this.state.title}
                    task={this.state.task}
                    tag1={this.state.tag1}
                    tag2={this.state.tag2}
                    updateItem={this.updateItem}
                    addTodo={this.addTodo}
             
                />

                <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                />
            </div>
        )
    }
}
export default App;

####どこで何をしていいのか。色々試しすぎて反応なくて逆にわからなくなりました。簡単な流れなどアドバイスを頂けると嬉しいです。

Answer 1

したいこと1、したいこと2について共通して言えることは、ローカルストレージから取得のタイミングで絞り込みや順序変更をするのではなく、表示するタイミングで行うという考え方が必要だということです。
手順と考え方を以下に記載します。

• TodoList で todos というものを filter() 関数を使って絞りこみを行います。

const todos = this.state.todos.filter((todo)=>{
    // ここで、条件を記載するために、絞り込み用のワードが必要なことに気づく
})

• TodoList の props に絞り込み用ワードを適用させます。そのためには、その絞り込み用ワードの状態を Todo クラスの state で持つ必要があります。

• 検索ワードは TodoForm で入力するため、ここにも props で落として、値を更新するようにします。

上記までで、絞り込みは行えます。
並び変えについては以下で可能です。

• TodoList の todos（絞り込み完了後）に対して sort() 関数を適用します。
• そのまま適用しても何でソートすればいいのか判断できないので、比較関数を作成します。
• 今回は新着順、期限順、重要度順の三つの比較項目があるため、比較関数も3つ必要だと思います。

以下は sort() 関数についてのリファレンスです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Comments

[ysk_m]

ありがとうございます！
なるほど。表示するタイミングでの絞り込みですね。
流れがわかりやすく記載してあるため出来そうです！
ちょっと行き詰まっていましたが助かりました。やってみます！