ReactJS: state dynamic flags

Question

I have a set of dynamic elements, so I do not know what the contents of the collection are. I want to display these checkboxes dynamically, and by default they will be checked. You should be able to uncheck the boxes that trigger another display function in the rendering. (so basically these are my filters)

I am struggling with state setting. I was thinking of the following, where I want to set initialState during a ComponentWillMount API call:

scenario 1 (arrays): 

this.state {
    checkboxes: [value1, value2, value3],
    checkedcheckboxes: [value1, value2]
}

Then I can use the response.addons.update function to change the state of checkcheckboxes. The downside is that while rendering my checkboxes, I need to iterate over the checkcheckboxes array with indexOf for each checkbox to see if it should be checked.

scenario 2 (object):

this.state {
    checkboxes: {
       value1: true,
       value2: true,
       value3: false
}

, , ( ), setState. , .

- ?

!

Answer 1

, ( ) , . , .

, , componentDidMount API , .

constructor(props) {
    super(props);

    this.state = {
        checkboxes: [],
        filter: 'ALL'
    };

    //each checkbox would take the form of {label: 'some label', checked: true}
}

componentDidMount() {
    getData(response => { //some API call
        this.setState({
            checkboxes: response.body
        });
    });
}

, , checkbox DOM. , .map . .filter , .

function renderCheckboxes() {
    const {checkboxes, filter} = this.state;

    return checkboxes
        .filter(checkbox =>
            filter === 'ALL' ||
            filter === 'CHECKED' && checkbox.checked ||
            filter === 'UNCHECKED' && !checkbox.checked
        )
        .map((checkbox, index) =>
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={checkbox.checked}
                        onChange={toggleCheckbox.bind(this, index)}
                    />
                    {checkbox.label}
                </label>
            </div>
        );
}

, onChange, ? , checked, , . toggleCheckbox :

function toggleCheckbox(index) {
    const {checkboxes} = this.state;

    checkboxes[index].checked = !checkboxes[index].checked;

    this.setState({
        checkboxes
    });
}

, :

function updateFilter(filter) {
    this.setState({
        filter
    });
}

, render, , ( ):

render() {
    return (
        <div>
            {renderCheckboxes.call(this)}
            <div>
                <h4>Filters ({this.state.filter})</h4>
                <a href="#" onClick={updateFilter.bind(this, 'ALL')}>ALL</a>
                &nbsp;|&nbsp;
                <a href="#" onClick={updateFilter.bind(this, 'CHECKED')}>CHECKED</a>
                &nbsp;|&nbsp;
                <a href="#" onClick={updateFilter.bind(this, 'UNCHECKED')}>UNCHECKED</a>
            </div>
        </div>
    );
}

- API:

https://jsbin.com/bageyudaqe/edit?js,output

, !