Patterns for deriving state gist12

code.js

function ToppingSelection(props){
    const {options,selected,onChange} = props;
    
    function handleInputChange(event){
        const value = event.target.name;
        if ( selected.includes(value)){
            onChange(selected.filter(option=>option !== value));
        } else {
            onChange(selected.concat(value));
        }
    }
    return <div>
        {options.map(option=>
            <label key={option.value}>
                {option.text}
                <input type={checkbox} checked={selected.includes(option.value)}
                onChange=(this.handleInputChange} name={option} />
            </label>
        )}
    </div>
}