Home>
How to delete a list clicked on the ToDo app
I am creating a todo application with React.
I created a function to add, but I am struggling with the code of the function to delete.
I tried to imitate the way of many class components on the net and incorporated them into function components.
The source code is as follows.
Thanks!
Error messageWarning: Functions are not valid as a React child.This may happen if you return a Component instead of<Component />from render.Or maybe you meant to call this function rather than return it.</code ></pre>
<strong>Applicable source code</strong>
<pre><code data-language = "App">import React from "react";
import Form from "./Form";
import List from "./List";
const App = () =>{
const [todos, setTodos] = React.useState ([]);
const addTodos = text =>{
const newTodos = [... todos, text];
setTodos (newTodos);
};
const removeTodos = (i) =>{
const deleteTodos = [... todos];
deleteTodos.splice (i, 1);
setTodos (this.StaticRange.todos);
};
return (
<Form addTodos = {addTodos} />
<List todos = {todos} removeTodos = {removeTodos} />
);
};
export default App;
Pass the removeTodos function created in the parent App to the grandchild Item.js in props.
import React from "react";
import Item from "./Item";
const List = (props) =>{
const todos = props.todos.map ((todo, i) =>{
return<Item key = {i} desc = {todo} />;
});
const removeTodos = props.removeTodos
return<ol>{todos} {removeTodos}</ol>;
};
export default List;
import React from "react";
import styled from "styled-components";
const Item = props =>{
const [isDone, setIsDone] = React.useState (false);
const toggleIsDone = () =>setIsDone (! isDone);
const buttonText = isDone? "Return": "Done";
const handleClick = (e) =>{
e.preventDefault ();
props.removeTodos ()
}
return (
<li>
<p>{props.desc}</p>
<Button onClick = {toggleIsDone}>{buttonText}</Button>
<Button onclick = {handleClick}>Delete</Button>
{/ * ↑↑↑ Click and delete event handler installed * /}
</li>
);
};
const Button = styled.button`
border-radius: 3px;
border: 2px solid pink;
color: pink;
margin: 0 1em;
padding: 0.25em 2em;
`;
export default Item;
-
Answer # 1
Related articles
- ruby on rails 6 - the delete function cannot be implemented well
- swift - i want to select two variables at the same time (delete function)
- reactjs - how to save in localstorage when implementing login function in react
- reactjs - an error occurs when trying to run the call function with the callback of the send function in web3js
- [reactjs] => notation of hoc generation function
- reactjs - [react calendar library] i want to delete from the array held when clicking the same date
- reactjs - about the order in the react function
- php - i want to add a delete function to the todo list
- javascript - rails: delete function does not work from the second time
- reactjs - i also want to implement a button to add and delete lines with nreact-hook-form
- php - processing of delete function with laravel
- reactjs - when using the map function in react or jsx, i want to specify the number of items to display
- html - after clicking on an element, i want to delete it and display the new class
- reactjs - function () returned by the cleanup function in useeffect in react hooks
- reactjs - about react function
- php - i want to create my own delete function with my own theme of wordpress
- php - delete function does not work well
- php i want to add a deletion function to delete only a specific number on the simple bulletin board
- reactjs - i'm using firebase authentication to create an authentication function in the react app, and i get an error about the
- reactjs - i want to pass the return value of the function to props of the [react] button component
Trends
It seems that removeTodos is not correctly passed from the
List component to the Item component.
I recommend passing removeTodos to the prop of the Item component in the following form.
(Because it becomes a bucket relay, it may not be a good shape, but ...)
You can now use props.removeTodos in the Item component.
(Don't forget to pass the Item key as an argument to removeTodos ())
In addition, it seems that an error has occurred when trying to render removeTodos in the return of the List component.