tengo una aplicación de tareas muy básica, únicamente agregas tarea con una fecha limite de entrega y cuando esta esta por llegar a tal fecha, te debería mostrar una notificación, la app efectivamente me muestra la notificación cuando esta por vencer, el problema es que cuando intento agregar otra tarea por cada letra que vaya copiando se actualiza el estado y por ende me vuelve a mostrar la notificación varias veces este es mi código, alguna idea de como solucionarlo ? Muchísimas gracias de ante mano
import React, { useState } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
export default function App () {
const [state, setState] = useState({
name: '',
fecha: ''
})
const [tasks, setTasks] = useState({
data: JSON.parse(localStorage.getItem('tasks')) || []
})
const handleAdd = () => {
const data = JSON.parse(localStorage.getItem('tasks'))
if(data){
data.push(state)
localStorage.setItem('tasks', JSON.stringify(data))
}else{
localStorage.setItem('tasks', JSON.stringify([state]))
}
}
const handleChange = (e) => {
return setState({
...state,
[e.target.name]: e.target.value
})
}
function getFecha(limitFecha, name){
let remainTime = (new Date(limitFecha) - new Date() + 1000) / 1000,
remainDays = Math.floor(remainTime /(3600 * 24))
if(remainDays <= '00'){
toast.warn(`${name} esta por vencer!`)
}
}
return (
<div className="App">
<ToastContainer />
<div>
<h2>Welcome to React</h2>
<h1>Agrege una tarea</h1>
<input type="text" name="name" onChange={handleChange} placeholder="Nombre de la tarea"></input>
<input
onChange={handleChange}
type="date"
name="fecha"
step="1"
min={new Date()}
max="2022-12-31"
/>
<button onClick={handleAdd}>ADD TASK</button>
</div>
<div>
{
tasks.data.length > 0 ? tasks.data.map((item, index) => {
return(
<div className="task" key={index}>
<h3>{item.name}</h3>
<p>{item.fecha}</p>
{
getFecha(item.fecha, item.name)
}
</div>
)
}): <h2>No tienes tareas pendientes</h2>
}
</div>
</div>
);
}