Form is not rendered

Question

I'm making a todo app and using useState to pass value to the form then submit the todo but for some reasons my todo form is not render and i don't know what is missing in my codes, please help me to check! Thank you so much!

import React, { useState } from "react";

function Todo({ todo, index }) {
  console.log("hiiii");
  return (
    <div>
      <p>{todo.text}</p>
    </div>
  );
}

function todoForm(addTodo) {
  const [value, setValue] = useState("");

  handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="add new todo"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
      </form>
    </div>
  );
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: "eat lunch",
      isCompleted: false
    },
    {
      text: "do homework",
      isCompleted: false
    },
    {
      text: "go to school",
      isCompleted: false
    }
  ]);

  addTodo = (text) => {
    console.log("hey");
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  return (
    <div>
      <div>
        {todos.map((todo, index) => {
          return <Todo key={index} index={index} todo={todo} />;
        })}
      </div>
      <div>
        <todoForm addTodo={addTodo} />
      </div>
    </div>
  );
}
export default App;

Link sandbox: https://codesandbox.io/s/serverless-bash-ef4hk?file=/src/App.js

Answer 1

your problem is solved it

APP.JS

import React, { useState } from "react";

function Todo({ todo, index }) {
  console.log("hiiii");
  return (
    <div>
      <p>{todo.text}</p>
    </div>
  );
}

function todoForm(addTodo) {
  const [value, setValue] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="add new todo"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
      </form>
    </div>
  );
}

function App() {
  const [todos, setTodos] = useState([
    {
      text: "eat lunch",
      isCompleted: false
    },
    {
      text: "do homework",
      isCompleted: false
    },
    {
      text: "go to school",
      isCompleted: false
    }
  ]);

  const addTodo = (text) => {
    console.log("hey");
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
  };

  return (
    <div>
      <div>
        {todos.map((todo, index) => {
          return <Todo key={index} index={index} todo={todo} />;
        })}
      </div>
      <div>
       {todoForm(addTodo)}
      </div>
    </div>
  );
}
export default App;

Answer 2

JSX tags must be uppercased in order to be properly parsed by the compiler as a React component.

Instead of todoForm, use TodoForm.

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

From: https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type

Also, you need to destructure props inside TodoForm in order to gain access to addTodo:

// Bad
function TodoForm(addTodo) {...}

// Good
function TodoForm({addTodo}) {...}

You should also assign you handlers to consts:

// Bad
addTodo = (text) => {...};

// Good
const addTodo = (text) => {...};