Todoリストの機能で、inputの形式で出力したものを編集できるようにしたい

Question

前提・実現したいこと

Next.jsでTodoアプリを作成しており、只今Todoリストの編集機能を作成中です。
そのTodoリストの仕様として、Todoのテキストは__<input value={item.text} />__ のような形で出力され、いつでも編集できるというようにしたいです。
しかし、出力された部分をクリックしても編集できるようになりません。これを編集できるようにするにはどのようにすればよいのかわからないので、力を貸していただきたいです。

該当のソースコード

import React, { useState } from 'react'
import { FormLabel, Input ,GridItem, Checkbox, Button } from '@chakra-ui/react'
import { v4 as uuidv4 } from 'uuid';

interface Item {
  id: number;
  key: number;
  text: string;
  checked: boolean;
}

const InputForm: React.FC = ({
 
}) =>{
  let keynumber = Number(uuidv4())
  const [text, setText] = useState('');
  const [items, setItems] = useState<Item[]>([]);


  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setText(e.target.value)
  const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault()
    if(text === '')return; 
    setItems(items => [ ...items,{id: items.length+1,key: keynumber, text, checked: false }])
    setText('')
  }
  const handleDeleteItem = (index:number) => {
    const newItems = [...items]
    newItems.splice(index,1)
    setItems(newItems)
  }


  const handleOnEdit = (key: number, text: string) => {

    const newItems = items.map((item) => {
      if (item.key === key) {
        item.text = text;
      }
      return item;
    });

    setItems(newItems);
  };

  const handleOnCheck = (key: number, checked: boolean) => {

    const newItems = items.map((item) => {
      if (item.key === key) {
        item.checked = !checked;
      }
      return item;
    });

    setItems(newItems);
  };

 
  return (
    <>
      <GridItem colSpan={2}>
        <form onSubmit={ handleSubmit }>
        <FormLabel>press Enter</FormLabel>
        <Input placeholder="Enter" value={text} onChange={(e) => handleChange(e)} />
        </form>
      </GridItem>
      {items.map((item, index) => {
        return(
        <GridItem colSpan={2} >
          <Checkbox key={item.key} checked={item.checked}
          onChange={() => handleOnCheck(item.id, item.checked)}>
            <Input value={item.text} 
            onChange={(e) => handleOnEdit(item.id, e.target.value)}
            />
            <Button colorScheme='pink' size="xs" onClick={() => handleDeleteItem(index)}>
              delete
            </Button>
          </Checkbox>
        </GridItem>
        );
     })}
    </>
  )
}

export default InputForm

試したこと

chakra-uiを使用していたので、Inputタグをinputに変えてみる

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

@chakra-ui/react　1.6.9
@types/react　17.0.29

Comments

[hoshi-takanori]

Item に id と key がありますが、id だけで良いのでは。
また、id の型を string にして uuidv4() を指定した方が良いでしょう。
(id を連番にしたくなる気持ちは分かりますが、そんなことをしても有害なだけです。)

Answer 1

直したコード

import React, { useState } from "react";
import { FormLabel, Input, GridItem, Checkbox, Button } from "@chakra-ui/react";
import { v4 as uuidv4 } from "uuid";

interface Item {
  id: number;
  key: number;
  text: string;
  checked: boolean;
}

const InputForm: React.FC = ({}) => {
  let keynumber = Number(uuidv4());
  const [text, setText] = useState("");
  const [items, setItems] = useState<Item[]>([]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
    setText(e.target.value);
  const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (text === "") return;
    setItems((items) => [
      ...items,
      { id: items.length + 1, key: keynumber, text, checked: false }
    ]);
    setText("");
  };
  const handleDeleteItem = (index: number) => {
    const newItems = [...items];
    newItems.splice(index, 1);
    setItems(newItems);
  };

  const handleOnEdit = (key: number, text: string) => {
    const newItems = items.map((item) => {
      console.log(item.id, key);
      if (item.id === key) {
        item.text = text;
      }
      return item;
    });

    setItems(newItems);
  };

  const handleOnCheck = (key: number, checked: boolean) => {
    const newItems = items.map((item) => {
      if (item.key === key) {
        item.checked = !checked;
      }
      return item;
    });

    setItems(newItems);
  };

  return (
    <>
      <GridItem colSpan={2}>
        <form onSubmit={handleSubmit}>
          <FormLabel>press Enter</FormLabel>
          <Input
            placeholder="Enter"
            value={text}
            onChange={(e) => handleChange(e)}
          />
        </form>
      </GridItem>
      {items.map((item, index) => {
        return (
          <GridItem colSpan={2}>
            <Checkbox
              key={item.key}
              checked={item.checked}
              onChange={() => handleOnCheck(item.id, item.checked)}
            />
            <Input
              value={item.text}
              onChange={(e) => handleOnEdit(item.id, e.target.value)}
            />
            <Button
              colorScheme="pink"
              size="xs"
              onClick={() => handleDeleteItem(index)}
            >
              delete
            </Button>
          </GridItem>
        );
      })}
    </>
  );
};

export default InputForm;

直して実際に動作するもの

<Checkbox>がInput要素にかぶっていたのとhandleOnEdit()の

if (item.id === key) {
  item.text = text;
}

が

if (item.key === key) {
  item.text = text;
}

item.keyで存在しないプロパティを参照しようとしていたのが原因です