vendredi 9 juillet 2021

How can i add a checkbox value to an array depending on it's state on react?

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