fileter or delete an array list with useState
Thu Jun 29 2023 21:10:34 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
---------------- App Page ---------------
import React, { useState } from "react";
import ListItem from "./ListItem";
function App() {
const [input, setInput] = useState("");
const [task, setTask] = useState([]);
function handleChange(event) {
const newTask = event.target.value;
setInput(newTask);
}
function deleteItem(id) {
console.log("Delete this", id);
setTask((prevTask) => {
return prevTask.filter((item, index) => {
return index !== id;
});
});
}
const listTasks = [...task];
function addTasks() {
setTask((prevTask) => [...prevTask, input]);
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input type="text" name="tasksName" onChange={handleChange} />
<button onClick={addTasks}>
<span>Add</span>
</button>
</div>
<div>
<ul>
{listTasks.map((items, index) => (
<ListItem key={index} id={index} text={items} delete={deleteItem} />
))}
</ul>
</div>
</div>
);
}
export default App;
------------------ Input List Page -------------
import React, { useState } from "react";
function ListItem(props) {
const [conditionLine, setLine] = useState(false);
function HandleChange() {
setLine((prevValue) => {
return !prevValue;
});
}
return (
<div onClick={HandleChange}>
<li style={{ textDecoration: conditionLine && "line-through" }}>
{props.text}
<button className="button_list" onClick={()=>props.delete(props.id)}>
<span>Delete</span>
</button>
</li>
</div>
);
}
export default ListItem;
content_copyCOPY
revisar a fondo la funcion deleteItem(id), en donde se pasa el id por la pagina app y luego se reenvia el id al darle clieck al boton a la pagina de app nuevamente. entender bien lo que pasa
Comments