LoginSignup
yuta1414win
@yuta1414win

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

コンポーネントの作成方法

解決したいこと

deleteボタンに削除コンポーネントを作成したいです。

例)
現在ReactでTodoアクションを追加できるものを作成しております。

発生している問題・エラー

Warning: Received `true` for a non-boolean attribute `delete`.

If you want to write it to the DOM, pass a string instead: delete="true" or delete={value.toString()}.

例)

import { useState } from "react";

const App = () => {
  // 作成したtodoを入れておくためのstate"配列"を活用する
  const [todos, setTodos] = useState([]);
  // フォームに入力された値をtodoに登録するまでに入れておくためのstate"文字列"
  const [tmpTodo, setTmpTodo] = useState("");

  const addTodo = () => {
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");

    const DeleteButton = () => {
       const deleteButton = document.createElement('tmpTodo');
       deleteButton.textContent = '削除';
       deleteButton.addEventListener('tmpTodo', () => {
        todos.splice(addTodo, 1);
        setTmpTodo();
       });
    }
  };

  return (
    <>
      <h1>Todo App</h1>
      <div className="form">
        <input
          type="text"
          name="todo"
          // formの入力値をtmpTodoで持っておく
          onChange={e => setTmpTodo(e.target.value)}
          value={tmpTodo}
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => {
          return <li key={index}>{todo}
          <button delete>✖︎</button></li>;
        })}
      </ul>
      <style>{`
        h1 {
          text-align: center;
        }
        .form {
          display: flex;
          justify-content: center;
        }
        ul {
          width: 200px;
          margin: 10px auto;
        }
      `}</style>
    </>
  );
};

export default App;

自分で試したこと

×buttonに対して削除コンポーネントをつけたいのですが、うまくできません。。。。

0

2Answer

deleteの場合もaddと考え方は同様です。

<button onClick={addTodo}>Add</button>

この書き方を参考に、

<button delete>✖︎</button>

これを、

<button onClick={() => deleteTodo(index)}>✖︎</button>

などとして、deleteIndex関数を実装するとよいです。

1

Your answer might help someone💌