Patterns for deriving state gist5

code.js

// ToppingSelection receives props with the following structure (Typescript notation):
// {options:{text:string,value:string},selected:string[],onChange:(value)=>void}
class ToppingSelection extends React.Component {
    
    constructor(props){
        super(props);
        this.state = {
            optionsWithSelect:_.cloneDeep(props.options) // _ is for lodash, which I use for clarity
        }
    }

    handleInputChange = (event)=>{
        const value = event.target.name;
        const {optionWithSelect} = this.state;
        const index = optionWithSelect.indexOf(o=>o.value ===value);
        if (optionWithSelect[index].selected){
            this.uncheckOption(index);
        } else {
            this.checkOption(index);
        }
    }
    uncheckOption(index){
        const optionWithSelect = _.cloneDeep(this.state.optionWithSelect);
        optionWithSelect[index].selected = false;
        this.setState({
            optionWithSelect
        })
        this.props.onChange(optionWithSelect.filter(o=>o.selected).map(o=>({text:o.text,value:o.value}))
    }
    checkOption(index){
        const optionWithSelect = _.cloneDeep(this.state.optionWithSelect);
        optionWithSelect[index].selected = true;
        this.setState({
            optionWithSelect
        })
        this.props.onChange(optionWithSelect.filter(o=>o.selected).map(o=>({text:o.text,value:o.value}))        
    }
    render(){
        const {optionsWithSelect} = this.state;
        return <div>
            {options.map(option=>
                <label key={option.value}>
                    {option.text}
                    <input type={checkbox} checked={optionsWithSelect.checked}
                    onChange=(this.handleInputChange} name={option.value} />
                </label>
            )}
        </div>
    }
}