FactsHandler2.0.js

//Template from https://github.com/lape15/todo-inline

import React, { useState, useEffect } from "react";
import Item from "./Item";

var content = "default";

const FactsHandler = (props) => {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState("");

  useEffect(() => {
    if (localStorage.items) {
      setTodos(JSON.parse(localStorage.getItem("items")));
    } else {
      setTodos([]);
    }
  }, []);
  const handleChange = (e) => {
    setTodo(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (todo === "") {
      return;
    }
    let todoObject = {
      id: todos.length + 1,
      task: todo,
      completed: false,
    };
    //localStorage.setItem("items", JSON.stringify([...todos, todoObject]));
    setTodos([...todos, todoObject]);
    setTodo("");
  };

  const completedTodo = (index) => {
    const newList = todos.map((list) => {
      if (list.id === index) {
        list.completed = !list.completed;
      }

      return list;
    });
    //localStorage.setItem("items", JSON.stringify(newList));
    setTodos(newList);
  };

  props.logValue === true ? content = (
  <div className="container">
    <h1 className="numberFacts">Add your own fact!</h1>
      {" "}
      <div className="body">
        {" "}

        <div className="todo-form">
          {" "}
          <form onSubmit={handleSubmit}>
            <label>
              <input
                type="text"
                value={todo}
                name="todo"
                onChange={handleChange}
              />
            </label>
            <br/>
            <button className="button-styles" type="submit">Submit</button>
          </form>
        </div>
        <div className="tableDiv">
          {todos.length > 0 ? (
          <table>
          <tbody>
            <tr>
                  {todos.map((todoItem) => {
                    console.log("todoItem :" +todoItem.id);
                    return (
                      <Item
                        todoItem={todoItem}
                        completedTodo={completedTodo}
                        setTodos={setTodos}
                        todos={todos}
                        key={todoItem.id}
                     />
                    );
                  })}

            </tr>
        </tbody>
        </table>
          ) : (
            <div></div>
          )}
        </div>
      </div>
    </div>) : content = ""

  return (
    <div className="Table">
          <header className="App-bg">
            <div className="data-div">
                {content}
            </div>
          </header>

      </div>)
};

export default FactsHandler;