Reactでul liを動的に生成したい

Question

コード

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

const Todo = () => {
  const [todoList, setTodoList] = useState([]); //maparray

  const addTodoList = (Content) => {
    setTodoList(todoList.concat({"content":Content}));
  };
  console.log(todoList)

  const deleteTodoList = (index) => {
    setTodoList((item) => todoList[index] !== item);
  };

  return (
    <div className="p-3 mb-2 bg-info text-white">
      <Form todos={todoList} addTodoList={addTodoList} />
      <List todos={todoList} deleteTodoList={deleteTodoList} />
    </div>
  );
};

export default Todo;

import React, { useState } from "react";

const Form = (props) => {
  const [task, setTask] = useState([]);
  const handleNewTask = (event) => {
    setTask(event.target.value);
  };
  return (
    <div>
      <form onSubmit={props.addTodoList}>
        <div className="form-group row">
          <label className="col-sm-2 col-form-label">Your todo:</label>
          <input
            type="text"
            className="siimple-input"
            value={task}
            onChange={handleNewTask}
          />
          　
          <input type="submit" value="Add" className="btn btn-secondary btn-sm"
          onClick={props.addTodoList}/>
        </div>
      </form>
    </div>
  );
};

export default Form;

import React from "react";
let style = { maxWidth: "700px" };

const List = (props) => {

  const TodoListItems =
   props.todos.map((todo, index) => {
    return(
      <div className="container">
        <li
          key={index}
          className="list-group-item list-group-item-info"
          style={style}
        >
          {todo.content}{" "}
          <div className="float-right">
            <button type="button" className="btn btn-danger btn-sm" onClick={props.deleteTodoList}>
              delete
            </button>
          </div>
        </li>
      </div>
    );
  })

  return(
  <ul className="siimple-list">
    {TodoListItems}
  </ul>
  )
  }
export default List;

import React from "react";
let style = { maxWidth: "700px" };

const List = (props) => {

  const TodoListItems =
   props.todos.map((todo, index) => {
    return(
      <div className="container">
        <li
          key={index}
          className="list-group-item list-group-item-info"
          style={style}
        >
          {todo.content}{" "}
          <div className="float-right">
            <button type="button" className="btn btn-danger btn-sm" onClick={props.deleteTodoList}>
              delete
            </button>
          </div>
        </li>
      </div>
    );
  })

  return(
  <ul className="siimple-list">
    {TodoListItems}
  </ul>
  )
  }
export default List;

つまづいているところ

• Formは表示されるのですが、何か入力してサブミットすると、何も映らなくなります。
• Reactを使ったコードのデバッグはどのようにやるのがいいのでしょうか。

ご教示いただけたら幸いです。

追記

まだpropsの受け渡しなどが理解できていないので自分でもう少し考えてみます

Answer 1

<form> タグの onSubmit イベントは強制的に画面遷移させてしまいます。なので onSubmit は取っちゃいましょう。また送信ボタンも <input> ではなく <button> を使いましょう。

React のデバッグ方法ですが、まずはブラウザで F12 を押して開発者コンソールを開いてみてください。エラーがある場合そこに出ます。

Comments

[butsuli_shine]

ありがとうございます、List表示はできました。
デバッグの方法も教えてくださりありがとうございました。
Javascriptの配列についてもまだ理解できていなかったので、勉強しようと思います