Tengo una lista que es repintada cada vez que introduzco un nuevo valor en el input, he intentado usar memo
importado desde React
. Como o donde podría ubicar este memo en mi código ya que no logro que este no reenderice cuando escribo en el input.
import React, { useState, useEffect, useCallback, memo} from 'react';
const NavBar = () => {
const [text, setText] = useState([]);
const [search, setSearch] = useState("");
const url = 'http://localhost:3004/trabajadores';
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setText(data));
}, [])
const handleAdd = () => {
const newText = { id: Date.now(), name: search}
setText([...text,newText]);
}
const handleSearch = (e) => {
setSearch(e.target.value);
}
const handleDelete = useCallback((nameId) => {
setText(text.filter(txt => txt.id !== nameId));
},[text])
const handleFilter = text.filter(i =>{
return i.name.toLowerCase().includes(search.toLowerCase());
})
console.log(text);
return(
<nav>
<input
type="text"
value={search}
onChange={(e) => handleSearch(e)}
/>
<button onClick={handleAdd}>Add</button>
{handleFilter.map((i => {
return <p key={i.id}>{i.id}-{i.name}<button onClick={() => handleDelete(i.id)}>Delete</button></p>
}))}
</nav>
);
}
export default NavBar;
App
requiere ejecutar algún proceso mientras el usuario ingresa datos en el input? Saludoskeystroke
si elinput
se configura como no controlado por ReactJS; en la propiedadvalue
deja una asignación vacíavalue=""
y remueve el métodoonChange
pues como mencionas, no hace falta hacer nada mientras el usuario esta ingresando letras en elinput
.