todoアプリ編集機能追加

Question

Reactでtodoアプリを作成しています。
追加機能と削除機能は実装できたのですが、編集機能に手こずっています。

toggleを付けてクリックした時にItemか、Inputタグが出てそこで編集する様にしています。
このInputに入力したテキストが表示される様にしたいのですが、EditFormからAppに渡されたvalueをどうやって処理すれば良いのかでつまづいています！

#####イベント実行時のエラー

TypeError: Cannot read property 'value' of undefined

###コード
上から親子関係になっています

import React, { useState } from "react";
import Form from "./Form";
import List from "./List";

const App = () => {
  const [todos, setTodo] = useState(["スキップ", "ジャンプ", "しゃがむ"]);
  const addTodos = text => {
    if (!text) {
      return;
    }
    const newTodos=[...todos, text];
    setTodo(newTodos);
  };
  const removeTodos= todo =>{
      setTodo(todos.filter(e=>e !== todo))
  }
  const changeText=(value)=>{
      setTodo(e=>e.target.value)
  }
  return (
    <div>
      <Form addTodos={addTodos}/>
      <List todos={todos} removeTodos={removeTodos}　changeText={changeText}/>
    </div>
  );
};

export default App;

import React from "react";
import Item from "./Item";
const List = props => {
  const todos = props.todos.map((todo, i) => {
    return (
      <Item
        key={i}
        desc={todo}
        remove={props.removeTodos}
        changeText={props.changeText}
      />
    );
  });
  return <ol>{todos}</ol>;
};
export default List;

import React, { useState } from "react";
import EditForm from "./EditForm";
const Item = props => {
  const [isDone, setIsDone] = useState(false);
  const toggleIsDone = () => setIsDone(!isDone);
  const buttonText = isDone ? "戻す" : "完了";
  const handleClick = () => props.remove(props.desc);
  const [editIt, editIsDone] = useState(false);
  const toggleEditForm = () => editIsDone(!editIt);
  const changeText = props.changeText;
  return (
    <li>
      {editIt ? <EditForm changeText={changeText} /> : <p>props.desc</p>}
      <button onClick={toggleIsDone}>{buttonText}</button>
      <button onClick={handleClick}>削除</button>
      <button onClick={toggleEditForm}>編集</button>
    </li>
  );
};

export default Item;

import React, { useState } from "react";

const EditForm = props => {
  const [value, setValue] = useState("");
  const handleChange = () => props.changeText(value);
  return (
    <form action="">
      <input
        type="text"
        value={value}
        placeholder="React編集"
        onChange={e => setValue(e.target.value)}
      />
      <button type="submit" onClick={handleChange}>
        実行
      </button>
    </form>
  );
};
export default EditForm;

Answer 1

こんにちは。
以下のように修正してみると、いかがでしょうか？

(1) App

App の changeText に引数 pos を追加します。これは配列todos のインデクスとなる整数値が入ってくる想定で、 todos の pos の位置の要素を value で置き換えた配列で setTodoするようにします。以下は修正後の changeText です。

修正後：

const changeText = (pos, value) => {
  const newTodos = todos.map((e, i) => i === pos ? value : e);
  setTodo(newTodos);
}

(2) List

List が return する、todosの各要素に相当するItemを作るところで、<Item> の props changeText の値となる関数において、props.changeText の実行の際、(1)で追加した、配列のインデクス i も渡すようにします。この i は map に渡す関数の第二引数として入ってくるもので、props key に与えているものと同じものです。

修正前：

changeText={props.changeText}

修正後：

key={i}
・・・
changeText={value => props.changeText(i, value)}

(3) Item

まず、以下の部分

修正前：

const [editIt, editIsDone] = useState(false);

ですが、 editIsDone という名前だと、 editIsDone(true) を実行したときに、編集が完了したような意味合いになりますが、実際はeditIt が true になって編集状態になります。したがってeditIsDone という名前は混乱の元かと思いますので、以下のように、 editIt の値を設定するという意味で、setEditIt に変更します。

修正後：

const [editIt, setEditIt] = useState(false);

上記にあわせて下記も editIsDone から setEditIt に修正します。

修正後：

const toggleEditForm = () => setEditIt(!editIt);

それと、 <EditForm> に渡すpropsとして value を追加して、input の初期値を指定するようにします。

{editIt ? <EditForm changeText={changeText} value={props.desc}/> : <p>{props.desc}</p>}

(4) EditForm

useState で得られる value の初期値が、上記(3) による追加で、propsから渡される value になるように、以下のように修正します。

修正後：

const [value, setValue] = useState(props.value || "");

また、return で返すJSXで、 <form>を使う必要はないので、以下のように <div>に変更し、<button>のtype を submit ではなく button にします。

修正後：

  return (
    <div>
      <input
        type="text"
        value={value}
        placeholder="React編集"
        onChange={e => setValue(e.target.value)}
      />
      <button type="button" onClick={handleChange}>
        実行
      </button>
    </div>
  );

上記の修正で、とりあえず編集ができるようになると思います。

以上、参考になれば幸いです。

Comments

[Kosuke0906]

すごく分かり易くかったです！！

ありがとうございます！
実行した時、渡されたvalueのインデックスが等しいか等しくないかで分岐させるのですね！

後は編集して実行押した時inputタグが消える様にしていきます！！
自力で頑張ります????

[jun68ykt]

どういたしまして。
疑問が解決したようで、よかったです????