Oposite of Boolean previous value - Tree concept practice
Wed Jun 28 2023 23:46:03 GMT+0000 (Coordinated Universal Time)
Saved by
@sarfraz_sheth
#react.js
-------------- List Item 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}
</li>
</div>
);
}
export default ListItem;
-------------- 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);
}
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) => (
<ListItem text={items} />
))}
</ul>
</div>
</div>
);
}
export default App;
content_copyCOPY
Importante destacar que se utiliza lo contrario del valor previo en el list item. se hace nested las funciones y los componentes. destacar el loop del map que se hace en el arreglo "listTasks"
Comments