I have been trying to make a filtering section for an email list. There is a pair of criteria that could be one or the other, so i thought a checkbox would be great. Thing is, i don't know how to add the value that the checkbox represents to an array depending on it's state (if it's checked the add it, if it's not, then remove it). I am using react and react-bootstrap. I would very much apreciate the help:
const [filtros, setFiltros] = useState([]);//this is the filter list and the method to change it
const addFilter = (name, e) => {//this is the method to add a filter to the list
setFiltros([...filtros, {
id: filtros.length,
value: name
}])
}
<Container>
<Row>
<Col>
<DropdownButton id="ciclo" title="Ciclo" variant="success">//this is a dropdown to add filters
{CURSOS.map((val,key) => {
return(
<Dropdown.Item onClick={addFilter.bind(this, val.ciclo)}>{val.ciclo}</Dropdown.Item>//agregar condición para que no se repita si se aperta más de una vez
)
})}
</DropdownButton>
</Col>
<Col>
{filtros.map(filtros => (<ul key={filtros.id}>{filtros.value}</ul>))}
</Col>
<Col>
<Form>
//this are the checkbox that i would lñike to use
<Form.Group controlId="alumno">
<Form.Check type="checkbox" label="Alumnos"/>
</Form.Group>
<Form.Group controlId="tutor">
<Form.Check type="checkbox" label="Apoderados"/>
</Form.Group>
</Form>
</Col>
</Row>
<container/>
Just in case, filtro
stands for filter. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire