Patterns for deriving state gist6

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 {

  handleInputChange = (event)=>{
      const value = event.target.name;
      if ( selected.includes(value)){
          onChange(selected.filter(option=>option !== value));
      } else {
          onChange(selected.concat(value));
      }
  }
  render(){
      const {options,selected} = this.props;
        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>
  }
}