tengo una variedad de cosas
const reportsData = [ { name: 'Walter', Laudos: 1, }, { name: 'John', Laudos: 20, }, ]Luego, en mi componente de reacción, necesito que cuando haga clic en una casilla de verificación, establezca un estado que haga que mi lista filtre solo ese nombre. Me gusta:
const [buscarUsuario, establecerBuscarUsuario] = useState('')
{reportsData .filter((value: any) => { if (searchUser == '') { return value } else if ( value.name .toLowerCase() .includes(searchUser.toLowerCase()) ) { return value } })luego en la casilla
<input type="checkbox" checked={john} // just for example onChange={john} // just for example className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" /> Necesito que cuando presiono este, cambie el valor de searchUser a 'John'.
Miré muchas respuestas aquí, pero cada una de ellas estaba desordenada o usó this.setState en lugar de useState.
¿Cómo podría lograr esto?
definir el estado de esta manera:
const [searchUser, setSearchUser] = useState([])luego agregue cada casilla de verificación de esta manera:
<input type="checkbox" thisUser="john" // just change this name to make checkbox for another user defaultChecked={false} onChange={changeSearchUser} className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />agregue esta función a su componente:
function changeSearchUser(e){ if (e.target.checked) { setSearchUser(previousSreach => [...previousSreach, e.target.thisUser]) } else { setSearchUser(previousSreach => { const index = previousSreach.indexOf(e.target.thisUser) if (index > -1) { return previousSreach.splice(index, 1); } }) } }