ReactJS Tutorial 42: Todo App Part 15 Adding Complete Task Functionality

In this lecture we will learn how to add the complete task functionality in a React app

[TheDigitalArtist]

i have watched all videos. please start advace project and teach backend if you can. you are such a good tutor.

[ianhow]

i followed exactly the same code but when i click the Add button it gives me error: Uncaught Error: Objects are not valid as a React child (found: object with keys {name, done}). If you meant to render a collection of children, use an array instead.
import styles from "./form.module.css";
import React, { useState } from "react";
export default function Form({todos, setTodos}) {
//const [todo, setTodo] = useState("");
const [todo, setTodo] = useState({name: "", done: false});

function handleSubmit(e) {
e.preventDefault();
setTodos([...todos, todo]);
setTodo("");
}

return (
<form className={styles.todoform} onSubmit={handleSubmit}>
<div
<input
className= {styles.modernInput}
onChange={(e) => setTodo({name : e.target.value, done: false})}
value={todo.name}
type="text"
placeholder="Add a new todo"
></input>

<button type="submit">Add</button>
</div>

</form>
);
}

[रोहीतकुमान]

Hello @ashutoshpawar can you please explain in Toitems.jsx handel delete we filter with object instead of todo.name !== items.name... Please let me know if I am wrong

[MagicAndReason]

Haha, I can tell translating this to TypeScript will be.. interesting.